如何在页面滚动上实现动画效果？

Question

当用户滚动浏览网页时，如何触发动画CSS？

是什么时候v-show =“element”出现的问题，触发器x？

使用Vue的2 +动画的CSS

Answer 1

我找到答案从Ikbel有用

How to display and transition when scroll position reaches element position in the screen?

你可以用它加入了结合inViewport的窗口滚动事件元素自定义指令实现这一目标要动画。

我添加的数据转换到的HTML我想动画

<div v-vpshow data-transition="flipInX"><div> 

元素和更改绑定这样

el.$onScroll = function() { 
    if (binding.def.inViewport(el)) { 
     el.classList.add('animated') 
     el.classList.add(el.getAttribute('data-transition')) 
     el.classList.remove('before-enter') 
     binding.def.unbind(el, binding) 
    } 
}