jQuery を使用せずにスクロール時に JavaScript を使用して CSS アニメーションをトリガーするにはどうすればよいですか?

jQuery を使用せずに JavaScript で CSS アニメーションをトリガーする

問題:

ユーザーがスクロールしたときに CSS アニメーションをトリガーしたいページを使用せずにjQuery.

解決策:

JavaScript で CSS アニメーションをトリガーする 1 つの方法は、classList プロパティを使用することです。その方法は次のとおりです。

1. アニメーション プロパティを使用して CSS クラスを作成します。

   例:

   .animated {
     animation: my-animation 2s forwards;
   }

2. イベント リスナーをdocument.

   ユーザーがページをスクロールするたびに、scroll イベントが発生します。このイベントを使用してアニメーションをトリガーできます。方法は次のとおりです:

   document.addEventListener('scroll', (event) => {
     // Get the element you want to animate.
     const element = document.getElementById('my-element');
   
     // Add the 'animated' class to the element.
     element.classList.add('animated');
   });

3. アニメーションが完了したら、'animated' クラスを削除します。

   animationend イベントを使用して検出できます。アニメーションが終わったとき。方法は次のとおりです:

   element.addEventListener('animationend', (event) => {
     // Remove the 'animated' class from the element.
     element.classList.remove('animated');
   });

例:

ユーザーがページをスクロールしたときに CSS アニメーションをトリガーする方法の完全な例を次に示します。

  <style>
    .animated {
      animation: my-animation 2s forwards;
    }

    @keyframes my-animation {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  </style>


  <div></div>

以上がjQuery を使用せずにスクロール時に JavaScript を使用して CSS アニメーションをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。