requestAnimationFrame不等待下一帧

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会成为性能瓶颈)

请不要试图给出淡入淡出效果的替代解决方案，因为我的问题不在于效果，而在于为什么animationFrame无法工作！

谢谢！

- kristóf baján

---

你能分享一个演示吗？ - Arun P Johny

请显示CSS代码。 - Jaromanda X

https://jsfiddle.net/arunpjohny/zwgsv3ys/1/ - 看起来很好。 - Arun P Johny

这里根本不需要使用 requestAnimationFrame。你可以使用 visibility 替代 display。[https://jsfiddle.net/46taexkp/] - DavidDomain

@ArunPJohny 点击时，它对我来说只是突然出现，没有任何过渡。 - kristóf baján

Answer 1

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

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

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

我曾经发现这个助手，从那时起就在我的工具箱里：

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

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

- ernesto

---

任何在 rAF 中排队的 rAF 将在下一帧中执行。这似乎是个谎言。 - H.B.

@H.B.：你有任何支持这个观点的参考资料或例子吗？ - ernesto

我在使用WebVR时遇到了一些问题，不过这些问题可能是由于外部设备具有自己的rAF循环而产生的。我需要更深入地研究一下，也许实际行为甚至无法通过Chrome分析器等工具进行正确观察。 - H.B.

看起来这可能只是一个分析器的副作用，实际上一切都按预期执行。 - H.B.