假设我有一个复杂的 HTML 组件,我想要为其设置动画,但每次需要设置动画时,都需要完成几件事,例如渲染新的 HTML 组件、设置高度、附加 css 类等......
如果动画在浏览器重排/重绘过程中触发,这可能会导致动画不平滑。我可以使用 setTmeout 来延迟动画,但它应该等待多长时间尚不清楚。
有没有什么万无一失的方法来等待所有这些浏览器渲染工作完成?
Use window.requestAnimationFrame()
(https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame) - 您使用它的方式基本上与使用它的方式相同setTimeout
,但您没有指定延迟 - 浏览器会为您处理它。
保罗·爱尔兰 (Paul Irish) 的文章如下:http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
Eg:
stepAnimation = function () {
// Do something to move to the next frame of the animation
// then
step()
}
step = function () {
window.requestAnimationFrame(stepAnimation)
}
step()
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)