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

EN

你真的无法避免这一点。

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

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

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

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

你的动画看起来就像

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

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

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

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