要素を削除せずに CSS3 アニメーションを再起動するにはどうすればよいですか?

CSS3 アニメーションの再起動: 要素の削除よりも優れたアプローチ

CSS3 アニメーションを使用する場合、ユーザー操作時にアニメーションを再起動する必要がある場合があります。起きます。一般的なシナリオは、進行状況バーに残り時間が表示され、完了後にリセットが必要になるというものです。アニメーション要素を削除して再挿入するとアニメーションを再開できますが、不必要な DOM 操作が必要になります。

リフローを使用した代替方法

より効率的なアプローチには、ブラウザをトリガーすることが含まれますリフローしてアニメーションの変更を適用します。これは、次の JavaScript 関数で実現できます:

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

この例では、アニメーション要素 (#animated) を選択し、そのアニメーションを一時的に none に設定します。これにより、アニメーションの進行状況はリセットされずに一時停止されます。次に、offsetHeight を使用してリフローを強制し、すべての CSS スタイルが適用されるようにします。最後に、アニメーション プロパティを元の値に戻し、アニメーションを初期状態から再開します。

実装例

次の HTML および CSS スニペットでは、

<div>

#animated {
  position: absolute;
  top: 70px;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

[リセット] ボタンをクリックすると、reset_animation() 関数が呼び出され、顕著な遅延や DOM 操作のオーバーヘッドなしでアニメーションが再開されます。

結論

ブラウザのリフローを使用してアニメーションの変更を適用すると、CSS3 アニメーションを再起動するためのより効率的で洗練されたソリューションが提供されます。これにより、要素の取り外しと再挿入の必要がなくなり、よりスムーズでパフォーマンスの高いユーザー エクスペリエンスが実現します。

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