如何正确等待浏览器重排/重绘完成

Question

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

如果在浏览器重排/重绘过程中触发动画，则可能导致动画不平滑。我可能会使用setTmeout来延迟动画，但它应该等待的时间不明确。

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

Answer 1

使用window.requestAnimationFrame()（https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame） - 您使用它的方式与使用setTimeout时基本相同，但您没有指定延迟 - 浏览器会为您处理延迟

关于保罗爱尔兰人的文章：http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

例如：

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

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

step()