如何在不刪除元素的情況下重新啟動 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) 並暫時將其動畫設為無。這會暫停動畫而不重置其進度。接下來，我們使用 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中文網其他相關文章！