如何在頁面滾動上實現動畫效果？

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