如何透過重排重新啟動 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; 
}

觸發時，此函數會暫停' animated' 元素，強制瀏覽器重新繪製，然後將動畫屬性恢復到其原始狀態。透過避免動畫分配的延遲或鏈接，這種方法簡化了動畫重置過程，確保流暢的視覺體驗。

以上是如何透過重排重新啟動 CSS3 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！