JavaScript を使用して CSS アニメーションをトリガーするにはどうすればよいですか?

JavaScript で CSS アニメーションをトリガーする

プレーンな JavaScript を使用して CSS アニメーションをトリガーすることは、Web ページにインタラクティブ性を追加する簡単ですが効果的な方法です。このアプローチは、jQuery や他のフレームワークに頼らずに、さまざまなイベントの特定のアニメーションをターゲットにする必要がある場合に特に便利です。

イベント リスナーを使用してアニメーションをトリガーする

するにはJavaScript を使用してアニメーションをトリガーする場合、イベント リスナーを使用して、アニメーションをトリガーする特定のイベントをリッスンできます。たとえば、スクロール イベントを使用して、ユーザーがページをスクロールしたときにアニメーションをトリガーできます。

// Add event listener to the window object
window.addEventListener('scroll', function() {
  // Get the element(s) you want to animate
  var elements = document.querySelectorAll('.my-animation');

  // Loop through the elements and start the animation
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.animation = "my-animation 2s 2s forward";
  }
});

クラス操作の使用

アニメーションをトリガーする別の方法は次のとおりです。要素にクラスを追加または要素から削除します。これは通常、JavaScript の classList API を使用して行われます。たとえば、animated というクラスを追加または削除して、その場でアニメーションを切り替えることができます。

// Get the element(s) you want to animate
var elements = document.querySelectorAll('.my-animation');

// Add the "animated" class to start the animation
for (var i = 0; i < elements.length; i++) {
  elements[i].classList.add('animated');
}

// Remove the "animated" class to stop the animation
for (var i = 0; i < elements.length; i++) {
  elements[i].classList.remove('animated');
}

イベント リスナーとクラス操作を組み合わせることで、JavaScript で CSS アニメーションをトリガーし、タイミングと動作を制御できます。ユーザー インタラクションやその他のイベントに応じて、これらのアニメーションが表示されます。

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