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

Question

我注意到，当 Angular 通过添加大量元素来更新页面时，甚至 CSS 动画也会停止运行。我在这里创建了一个 stackblitz https://stackblitz.com/edit/angular-fefvpa突出问题。当您点击“添加元素”按钮时，红色方 block 会停止移动大约半秒钟。我该怎么做才能避免这种情况？

Answer 1

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

你的动画看起来像

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

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

动画将使用较少的“GPU”，通过添加 transform:translateZ(0)，您还将使浏览器为该动画使用更多的 GPU。所以它可能会运行得更流畅。

我在我的电脑上测试过，添加元素时它不再“卡住”。