Question

感谢您办理登机手续！

据我所知（可能是错误的），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是一个性能瓶颈）

请不要尝试为淡化效果提供替代解决方案，因为我的问题不是效果，而是动画框架为什么不起作用！

谢谢！

Answer 1

我认为 requestAnimationFrame无法保证等待下一帧。 Paul Irish writes

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

如果调整了您的演示版，它现在适用于Chrome：https://jsfiddle.net/ker9zpjs/

从那时起，我曾经在我的工具箱中找到了这个帮助器：

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

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

requestAnimationFrame不等待下一帧

1 个答案: