如何在不删除元素的情况下高效地重新启动 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中文网其他相关文章！