requestAnimationFrame没有等待下一帧

requestAnimationFrame not waiting for the next frame

本文关键字：一帧 等待 requestAnimationFrame      更新时间：2023-09-26

感谢您的登录！

据我所知（这可能是错误的）JavaScript的requestAnimationFrame方法与setTimeout类似（有点），只是它不等待一定的时间，而是等待下一帧的渲染。

这可以用于很多事情，但我在这里试图实现的是基于CSS的JavaScript控制的渐变效果。下面是代码的样子和解释：

//This line makes the element displayed as block from none
//but at this point it has an opacity value of 0
this.addClass('element__displayed');
//here i am waiting a frame so that the previously added
//display value takes effect
window.requestAnimationFrame(function(){
    //adding opacity: 1 for fade effect
    this.addClass('element__visible');
}.bind(this));

我的问题是，即使元素已经设置了css转换，并且我正在等待显示值的呈现，但我没有得到转换，它只是弹出。

（如果我使用setTimeout（…，1000/60），它是有效的，但与requestAnimationFrame相比，setTimeout是一个性能瓶颈）

请不要试图为渐变效果提供替代解决方案，因为我的问题不是效果，而是为什么animationFrame不起作用！

谢谢！

I认为requestAnimationFrame不能保证等待下一帧。Paul Irish撰写

事件处理程序中排队的任何rAF都将在​同一帧​.在rAF中排队的任何rAF都将在下一帧中执行​.

如果改编了你的演示，它现在在Chrome上对我有效：https://jsfiddle.net/ker9zpjs/

我曾经在我的工具箱里找到过这个助手：

var nextFrame = function(fn) { raf(function() { raf(fn); }); };

但我必须承认，我的答案还没有得到充分的研究，如果有人能找到更好的信息，我也会很感激

相关文章：