当滚动位置到达屏幕中的元素位置时如何显示和转换？

假设这是我的模板:

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

这是你如何做到这一点directive.

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在视口中可见时,您需要为要动画的元素添加指令.

例如:

...

该指令使用两个类.

1)before-enter:它默认隐藏元素,并在指令绑定到元素时自动添加.

2)enter:当元素变得可见时,这个应该包含你想要应用的转换.

v-vpshow一旦元素在视口中变得可见(在触发动画之后),将自动解除绑定,从而删除已设置的任何数据和事件侦听器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;
}

    

        

            
Lorem ipsum dolor sit amet, consectetur.
        
        

            
Lorem ipsum dolor sit amet, consectetur.
        
        

            
Lorem ipsum dolor sit amet, tenetur!