如何在不刪除元素的情況下有效率地重新啟動 CSS3 動畫？

重新啟動CSS3 動畫：一種更有效率的技術

使用CSS3 動畫時，通常需要在事件發生後重新啟動動畫，例如點擊。然而，直接設定受影響元素的比例或其他屬性可能會出現問題，導致延遲或複雜的分配連結。

元素刪除技巧

提出的一種非常規方法是從文件中刪除動畫元素並重新插入複製版本。雖然它確實有效地重新啟動了動畫，但它引入了不必要的複雜性和潛在的效能問題。

回流來救援

更優雅、更有效率的解決方案在於觸發回流。重排是瀏覽器根據 DOM 或 CSS 的變更重新計算元素佈局的過程。透過利用此行為，我們可以在不刪除元素的情況下有效地重置動畫。

以下 JavaScript 程式碼示範了此方法：

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

使用了 offsetHeight 屬性觸發重排，強制瀏覽器重新計算版面配置並重新套用動畫設定。這可以有效地立即重新啟動動畫，而不會出現任何延遲或繁瑣的連結。

此技術適用於各種 CSS3 動畫，並且可以輕鬆整合到任何 Web 應用程式或框架中。它提供了一種簡單而有效的方法來重新啟動動畫，而不會引入不必要的副作用。

以上是如何在不刪除元素的情況下有效率地重新啟動 CSS3 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！