Javascript 如何正确等待浏览器回流/重新绘制完成

假设我有一个复杂的HTML组件，我想制作动画，但每次需要制作动画时，都需要做一些事情，比如渲染新的HTML组件、设置高度、附加css类等等

<>这可能导致动画在浏览器回流/重绘中间触发动画不平滑。我可能会使用settmout来延迟动画，但它应该等待多长时间还不清楚

---

是否有任何防弹方法可以等待所有这些浏览器渲染工作完成？

使用

window.requestAnimationFrame（）

（）-您使用它的方式与使用

setTimeout

的方式基本相同，但您没有指定延迟-浏览器会为您处理它

Paul Irish的文章如下：

例如：

---

您是否使用Netscape 0.4，否则回流速度太快，您无法真正确定动画在回流之间发生的时间，而且无法等待回流，它是瞬间发生的。也许您真的在考虑如何等待窗口加载或类似的事情？在添加新的HTML组件时，请记住，在将它们添加到原始DOM之前，可以使用内部HTML和CSS对它们进行设置。一般来说，我的观点是这并不像你想象的那么明显。如果你的动画改变了布局，动画的每一帧都会触发回流。这不是递归的吗？我想要的是只制作一次动画，但要先等待回流/重新绘制完成？是的，但只是因为我假设有多个帧。您可以简单地作为

窗口运行它。requestAnimationFrame（runYourAnimationFunction）

注意：有时需要跳过第一帧（即

requestAnimationFrame（function（）{requestAnimationFrame（runAnimation）；}）；

），因为第一帧将发生在回流之前，用于更改被单击以触发整个事件的按钮的样式。

stepAnimation = function () {
  // Do something to move to the next frame of the animation
  // then
  step()
}

step = function () {
  window.requestAnimationFrame(stepAnimation)
}

step()