リフローで CSS3 アニメーションを再起動するにはどうすればよいですか?

CSS3 アニメーションの再開

ユーザー操作時に CSS3 アニメーションを復活させるのは一般的なタスクです。アニメーション要素を削除して再挿入することは効果的であるように見えますが、不必要な複雑さが生じます。リフロー機能を活用してアニメーションをシームレスにリセットすることで、より洗練されたソリューションが生まれます。

リフローは、ドキュメント構造の再フォーマットと再描画のプロセスであり、アニメーションのタイムラインを中断することなくスタイルを変更するための便利なメカニズムを提供します。アニメーション プロパティを一時的に「none」に設定してからリフローをトリガーすると、ブラウザーは進行中のアニメーションを無視する信号を受け取ります。これにより、その後のスタイルの変更がすぐに有効になり、アニメーションが効果的に再開されます。

説明するには、次の JavaScript スニペットを考えてみましょう:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

この関数がトリガーされると、' でアニメーションを一時停止します。アニメーション」要素を使用すると、ブラウザの再描画が強制され、アニメーション プロパティが元の状態に復元されます。このアプローチでは、アニメーション割り当ての遅延や連鎖を回避することで、アニメーションのリセット プロセスが簡素化され、スムーズな視覚エクスペリエンスが確保されます。

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