将元素添加到页面时如何运行CSS动画？

Question

我注意到，当通过添加许多元素来对页面进行角度更新时，甚至CSS动画也会停止运行。我在此处https://stackblitz.com/edit/angular-fefvpa创建了一个堆栈闪电来突出显示该问题。当您点击“添加元素”按钮时，红色方块停止移动约半秒钟。我该怎么做才能避免这种情况？

Answer 1

我能想到的一个对您有帮助的解决方案是在动画中使用transform: translateX而不是left。

您的动画看起来像

@keyframes mymove {
  from {transform: translateX(0)}
  to {transform: translateX(400px)}
}

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

该动画将使用较少的'GPU'，并且通过添加transform:translateZ(0)您还将使浏览器对该动画使用更多的GPU。因此它可能运行得更流畅。

我在PC上对其进行了测试，添加项目时它不再“冻结”。

Answer 2

您无法避免。

您要添加一千个孩子，这是一个非常重要的过程。

这种操作应以小块something like this完成。

Javascript是一种单线程脚本语言，这意味着大多数操作都处于阻塞状态。当您一一处理它们时，那​​么确定，这很漂亮。但是，当您同时运行一千次操作时（一次又一次不间断），您将面临此类问题。特别是使用DOM操作。