当滚动位置到达屏幕中的元素位置时如何显示和转换？ [英] How to display and transition when scroll position reaches element position in the screen?

问题描述

假设这是我的模板：

<template>
    <div id="Test">
        <transition name="fade">
            <div class="row" id="RowOne">
                <p>Lorem ipsum dolor odit qui sit?</p>
            </div>
        </transition>
        <transition name="fade">
            <div class="row" id="RowTwo">
                <p>Lorem ipsum dolor sit amet, consectetur.</p>
            </div>
        </transition>
        <transition name="fade">
            <div class="row" id="RowThree">
                <p>Lorem ipsum dolor sit amet, tenetur!</p>
            </div>
        </transition>
    </div>
</template>

我想显示和动画 RowOne，RowTwo和RowThree 分别在视口中显示时。与 Laracasts网站一样，当滚动位置到达元素偏移时，元素会显示并生成动画。是否可以使用Vue.js和javascript？

I want to display and animate RowOne, RowTwo and RowThree when it's in the displayed in the viewport, respectively. Like in the Laracasts website, the elements appear and animate when scroll position reaches the elements offset. Is it possible using Vue.js and javascript?

推荐答案

以下是如何使用进行操作指令。

Vue.directive('vpshow', {
  inViewport (el) {
    var rect = el.getBoundingClientRect()
    return !(rect.bottom < 0 || rect.right < 0 || 
             rect.left > window.innerWidth ||
             rect.top > window.innerHeight)
  },

  bind(el, binding) {
    el.classList.add('before-enter')
    el.$onScroll = function() {
      if (binding.def.inViewport(el)) {
        el.classList.add('enter')
        el.classList.remove('before-enter')
        binding.def.unbind(el, binding)        
      }
    }
    document.addEventListener('scroll', el.$onScroll)
  },

  inserted(el, binding) {
    el.$onScroll()  
  },

  unbind(el, binding) {    
    document.removeEventListener('scroll', el.$onScroll)
    delete el.$onScroll
  }  
})

您需要将 v-vpshow 指令添加到要在视口中显示时要动画的元素。

You will need to add v-vpshow directive to the elements you want to animate when they become visible in the viewport.

例如：

<div class="row" id="RowOne" v-vpshow>...</div>

该指令使用两个类。

1） before-enter ：它默认隐藏元素，并在指令绑定到元素时自动添加。

1) before-enter: it hides the element by default and is added automatically when the directive is bound to the element.

2）输入：此元素应包含元素可见时要应用的转换。

2) enter: this one should contain the transition you want to apply when the element becomes visible.

v-vpshow 一旦元素在视口中变得可见（触发动画后），将自动取消绑定，删除在<$ c $上设置的任何数据和事件侦听器c> bind 。

v-vpshow will unbind itself automatically once the element has become visible (after triggering the animation) in the viewport removing any data and events listeners that were set on bind.

这是一个有效的例子。

Vue.directive('vpshow', {
  inViewport (el) {
    var rect = el.getBoundingClientRect()
    return !(rect.bottom < 0 || rect.right < 0 || 
             rect.left > window.innerWidth ||
             rect.top > window.innerHeight)
  },
  
  bind(el, binding) {
    el.classList.add('before-enter')
    el.$onScroll = function() {
      if (binding.def.inViewport(el)) {
        el.classList.add('enter')
        el.classList.remove('before-enter')
        binding.def.unbind(el, binding)        
      }
    }
    document.addEventListener('scroll', el.$onScroll)
  },
  
  inserted(el, binding) {
    el.$onScroll()  
  },
  
  unbind(el, binding) {    
    document.removeEventListener('scroll', el.$onScroll)
    delete el.$onScroll
  }  
})

new Vue({
  el: '#app',  
})

/* v-vpshow classes */
.before-enter {
  opacity: 0;
}

.enter {
  transition: opacity 2s ease;  
}
/* ---------------- */



.row {  
  display: flex;
  min-height: 500px;
  justify-content: center;
  font-size: 20px;
  font-family: tahoma;
}

#RowOne {
  background-color: yellow;  
}

#RowTwo {
  background-color: #5D576B;
}

#RowThree {
  background-color: #F7567C;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app">
    <div id="Test">
        <div class="row" id="RowOne" v-vpshow>
            <p>Lorem ipsum dolor sit amet, consectetur.</p>
        </div>
        <div class="row" id="RowTwo" v-vpshow>
            <p>Lorem ipsum dolor sit amet, consectetur.</p>
        </div>
        <div class="row" id="RowThree" v-vpshow>
            <p>Lorem ipsum dolor sit amet, tenetur!</p>
        </div>
    </div>
</div>

这篇关于当滚动位置到达屏幕中的元素位置时如何显示和转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！