社区首页 >问答首页 >如何在页面中添加元素时运行CSS动画?

如何在页面中添加元素时运行CSS动画?
EN

Stack Overflow用户
提问于 2019-06-18 12:55:38
回答 2查看 42关注 0票数 0

我注意到,当angular通过添加大量元素来更新页面时,甚至CSS动画也会停止运行。我在这里创建了一个stackblitz https://stackblitz.com/edit/angular-fefvpa来突出这个问题。当你点击“添加元素”按钮时,红色方块会停止移动大约半秒。我能做些什么来规避这个问题呢?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-18 13:12:06

你真的无法避免这一点。

你附加了一千个孩子,这是一个相当重要的过程。

这种操作应该在小块中完成,something like this

Javascript是一种单读脚本语言,这意味着大多数操作都是阻塞的。当你一个接一个地做的时候,当然,它是很漂亮的。但是,当您同时运行一千个操作时(好吧,一个接一个地运行,没有任何中断),您就会面临这类问题。尤其是使用DOM操作时。

票数 0
EN

Stack Overflow用户

发布于 2019-06-18 13:12:17

我能想到的一个解决方案可能会对你有所帮助,那就是在动画中使用transform: translateX而不是left

你的动画看起来就像

代码语言:javascript
代码运行次数:0
复制
@keyframes mymove {
  from {transform: translateX(0)}
  to {transform: translateX(400px)}
}

您还可以向#box本身添加transform:translateZ(0)

动画将使用较少的‘图形处理器’,通过添加transform:translateZ(0),您也将使浏览器使用更多的图形处理器用于该动画。因此,它可能会运行得更流畅。

我在我的电脑上测试了它,当添加项目时它不再“冻结”。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56649679

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档