requestAnimationFrame代码执行时间

Mozilla关于requestAnimationFrame的文档指出，我传递给requestAnimationFrame的回调将在下一次重绘之前运行。requestAnimationFrame代码执行时间

我想弄清楚如何与此同步代码。

具体而言，我想：

应用一个CSS类元素
等待要完全处理和应用（在执行任何所需的布局/呈现/画）该类别
应用另一个CSS类到同一元素

我希望上面的执行尽可能快。

我可以使用requestAnimationFrame来实现这个吗？

看起来如果我用＃requestAnimationFrame包装＃1，它可以将＃1和＃3转换为单个执行，然后应用paint。与在皇家空军包裹＃2一样。我需要在＃1的回调中连锁＃3吗？

来源

2014-01-07 desau

你的课是否有过渡或动画？ –

@JonathandeM .:确实..这就是为什么我这样做。＃3是一个转换，我想确保在应用转换之前应用＃1。有一个＃4可以做更多的课程申请，我希望过渡到位。 – desau

使用[transitionend]（https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend?redirectlocale=en-US&redirectslug=DOM%2FMozilla_event_reference%2Ftransitionend）事件。 –

我在这里找到了一种可能的解决方案，虽然有点过分，但仍在工作。

如果我在requestAnimationFrame回调链中所有的这些结合在一起，然后将它按预期工作：

window.requestAnimationFrame(function() 
    { 
    // apply class 1 
    window.requestAnimationFrame(function() 
    { 
     // apply class 2 
    }); 
    });

我特别不喜欢这样的解决方案，但它是一个解决方案。有什么更好的吗？

来源

2014-01-07 18:51:50 desau

requestAnimationFrame代码执行时间

回答

相关问题