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代碼執行時間

回答

相關問題