ページスクロールでアニメーションを実装するにはどうすればよいですか？

Question

ユーザーがウェブページをスクロールすると、どのようにアニメーションCSSをトリガーできますか？

v-show = "element"が表示されたら、trigger x？ Vueの2は+ CSS

Answer 1

をアニメーション使用

は、私はあなたがしたい要素に、ウィンドウのスクロールイベントのinViewportを結合追加したカスタムディレクティブでこれをachiveでき

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

Ikbelからの答えが有用であることが判明しましたアニメーション化する。

私は

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

様結合変更をアニメーション化する要素をHTMLにデータ遷移を添加