如何在向页面添加元素时运行CSS动画？

我注意到，当angular通过添加大量元素来更新页面时，甚至CSS动画也会停止运行。我在这里创建了一个stackblitz来强调这个问题。当你点击“添加元素”按钮时，红方块停止移动大约半秒钟。我能做些什么来避免这种情况呢？

你真的无法避免

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

这种操作应该分小块进行

---

Javascript是一种单线程脚本语言，这意味着大多数操作都是阻塞的。当你一个接一个地做的时候，当然，这很漂亮。但是，当您同时运行一千个操作时（好吧，一个接一个，没有任何中断），您将面临此类问题。尤其是DOM操作

我能想到的一个解决方案是在动画中使用

transform:translateX

，而不是

left

你的动画看起来像

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

您还可以将

transform:translateZ（0）

添加到

#框

本身

动画将使用较少的“GPU”，通过添加

transform:translateZ（0）

您还将使浏览器为该动画使用更多的GPU。所以它可能运行得更平稳

---

我在我的电脑上测试了它，添加物品时它不再“冻结”。

@ManishKhedekar谢谢你，但你为什么要共享指向我的SO个人资料的链接？：）我添加了@Mihai T.；）