首頁 >web前端 >js教程 >如何透過重排重新啟動 CSS3 動畫?

如何透過重排重新啟動 CSS3 動畫?

Barbara Streisand
Barbara Streisand原創
2024-12-15 07:34:09783瀏覽

How to Restart CSS3 Animations with Reflow?

重新啟動 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn