首页 > web前端 > js教程 > 重新启动 CSS3 动画:回流是元素删除的最佳替代方案吗?

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

DDD
发布: 2024-11-11 04:55:03
原创
538 人浏览过

Restarting CSS3 Animations: Is Reflow the Best Alternative to Element Removal?

重新启动 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板