如何在页面滚动中实现动画

Question

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

出现v-show ="元素"时，触发x？

是问题

使用VUE 2 动画CSS

Answer 1

我从ikbel有用的答案

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

您可以使用自定义指令来实现此功能，该指令将窗口滚动事件的绑定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)
    }
}