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

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)
    }
}