重新启动 CSS3 动画：回流是元素删除的最佳替代方案吗？

重新启动 CSS3 动画：元素删除的改进替代方案

在重新启动 CSS3 动画时，经常采用的一种有趣的技术涉及删除元素从文档中提取动画元素并重新插入其克隆。虽然有效，但这种方法提供了优化的机会。

根据匿名专家的建议，实现动画重新启动的更好方法是触发回流。这可以通过访问 HTMLElement 的高度来完成，如下所示：

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

在此示例中，动画最初设置为“无”，从而触发重置。随后，通过访问元素的 offsetHeight 来启动回流，该元素计算并缓存元素的大小，从而应用动画重置。最后，分配给动画样式的“null”值允许其再次播放。

这种基于重排的方法既简洁又高效，在简单性和有效性上超越了之前的方法。

以上是重新启动 CSS3 动画：回流是元素删除的最佳替代方案吗？的详细内容。更多信息请关注PHP中文网其他相关文章！