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

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

Web 開発では、CSS アニメーションは Web ページに視覚的に動的な効果を提供します。ただし、JavaScript を使用してこれらのアニメーションをトリガーするのは一般的な課題となる可能性があります。 jQuery を使用したくない人のために、このガイドでは、JavaScript だけを使用して CSS アニメーションをトリガーするためのソリューションを提供します。

効果的なアプローチの 1 つは、クラス操作を利用することです。 HTML 要素にクラスを追加または削除することで、特定の CSS アニメーションをトリガーできます。 JavaScript では、これは HTMLElement オブジェクトの className プロパティを通じて実現できます。

例として、次の例を考えてみましょう。

function start() {
  document.getElementById('logo').classList.add('animate');
}

このスクリプトでは、start 関数は、ロゴ要素をクリックします。 「animate」クラスを要素に追加します。

CSS アニメーションをターゲットにするには、「animate」クラスに対応する CSS ルールを作成します。

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

この CSS ルールでは、 「my-animation」アニメーションは、「animate」クラスを持つ任意の要素に適用されます。

別の方法は、 HTMLElement オブジェクト。これにより、要素のインライン スタイルを直接操作できるようになります。このアプローチを使用してアニメーションをトリガーするには:

document.getElementById('logo').style.animation = 'my-animation 2s forwards';

前と同様に、CSS で「my-animation」アニメーションを定義してアニメーションの動作を指定します。

最後に、スクロールを伴う複雑なアニメーションの場合、スクロール イベント リスナーを使用できます:

window.addEventListener('scroll', () => {
  if (window.scrollY >= 100) {
    document.getElementById('logo').classList.add('animate');
  }
});

この例では、ユーザーが 100 ピクセルを超えて下にスクロールするとアニメーションが開始されます。この方法では、スクロール位置でトリガーするキーフレーム ルールを使用して CSS アニメーションを指定する必要があることに注意してください。

これらのテクニックを利用すると、純粋な JavaScript を使用して CSS アニメーションを動的にトリガーできるようになり、幅広い作成の可能性が開かれます。視覚的に魅力的な Web アプリケーション。

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