我注意到,当angular通过添加大量元素来更新页面时,甚至CSS动画也会停止运行。我在这里创建了一个stackblitz https://stackblitz.com/edit/angular-fefvpa来突出这个问题。当你点击“添加元素”按钮时,红色方块会停止移动大约半秒。我能做些什么来规避这个问题呢?
发布于 2019-06-18 13:12:06
你真的无法避免这一点。
你附加了一千个孩子,这是一个相当重要的过程。
这种操作应该在小块中完成,something like this。
Javascript是一种单读脚本语言,这意味着大多数操作都是阻塞的。当你一个接一个地做的时候,当然,它是很漂亮的。但是,当您同时运行一千个操作时(好吧,一个接一个地运行,没有任何中断),您就会面临这类问题。尤其是使用DOM操作时。
发布于 2019-06-18 13:12:17
我能想到的一个解决方案可能会对你有所帮助,那就是在动画中使用transform: translateX
而不是left
。
你的动画看起来就像
@keyframes mymove {
from {transform: translateX(0)}
to {transform: translateX(400px)}
}
您还可以向#box
本身添加transform:translateZ(0)
动画将使用较少的‘图形处理器’,通过添加transform:translateZ(0)
,您也将使浏览器使用更多的图形处理器用于该动画。因此,它可能会运行得更流畅。
我在我的电脑上测试了它,当添加项目时它不再“冻结”。
https://stackoverflow.com/questions/56649679
复制相似问题