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