JavaScript を使用して CSS アニメーションにパラメータを渡すにはどうすればよいですか?

JavaScript を使用して CSS アニメーションにパラメータを渡す

現代の Web 開発では、CSS アニメーションは、ユーザー インターフェイスに動的な効果やインタラクションをもたらす上で重要な役割を果たしています。ただし、外部データまたはユーザー入力に基づいてアニメーション プロパティを動的に制御する場合は制限される可能性があります。

次の CSS アニメーション コードについて考えてみましょう:

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

このアニメーションは、要素のスライドをアニメーション化します。右側から入ります。ただし、margin-left と width の値はハードコードされています。特定の要件に基づいてこれらの値をカスタマイズしたい場合は、パラメータとして渡す方法が必要です。

JavaScript を使用して CSS プロパティを操作できる強力な機能である CSS 変数を紹介します。 CSS 変数を使用すると、次のように動的なアニメーションのパラメータ化を実現できます。

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: var(--m, 0%);
    width: var(--w, 100%);
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

アニメーションでの var(--m, 0%) と var(--w, 100%) の使用に注目してください。 JavaScript では、これらの変数を目的の値に設定し、アニメーションをトリガーできるようになりました。

document.querySelector('.p2').style.setProperty('--m','100%');
document.querySelector('.p2').style.setProperty('--w','300%');

この単純な JavaScript コードは、クラス「p2」の要素に --m 変数と --w 変数を設定します。その結果、要素は指定された margin-left と width の値で右側からスライドインします。

CSS 変数と JavaScript を組み合わせることで、アニメーション パラメーターをプログラムで制御できるようになり、動的アニメーションの無限の可能性が開かれます。応答性の高いユーザー インターフェイス。

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