Pure JavaScript で CSS3 アニメーションを一時停止および再開する方法

ネイティブ JavaScript を使用して CSS3 アニメーションを一時停止および再開する方法:

この質問は、CSS3 アニメーションを一時停止および再開するための解決策を求めます (画像スライドショー) ) 外部ライブラリを使用せずに、画像をクリックすることで実行できます。提供されたコードは、関数内から複数のアニメーションを一時停止することでこれを管理しようとしますが、制限が発生します。

プレーンな JavaScript で CSS3 アニメーションを効果的に一時停止および再開するには、CSS クラスの利用を検討してください:

.paused {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

アニメーション要素にこのクラスを割り当てるか削除することで、必要に応じてアニメーションを一時停止または再開できます。

function toggleAnimation(element, pause) {
  pause ? element.classList.add('paused') : element.classList.remove('paused');
}

このアプローチ複数のアニメーションを同時に制御できるようになり、CSS と JavaScript の間の懸念をより明確に分離できます。また、クリック イベントがアニメーションに干渉しないようにします。

以上がPure JavaScript で CSS3 アニメーションを一時停止および再開する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。