通過vanilla JavaScript異步將css樣式添加到HTML元素中？

同伴們，我最近偶然發現了一些相當奇怪的東西，基本上破壞了我正在處理的網絡應用程序......我通過（vanilla）javascript添加到HTML元素中的css屬性，似乎是異步的證明我有一個小小的一段代碼...通過vanilla JavaScript異步將css樣式添加到HTML元素中？

... 

    _(leftView).addClass('notrans'); 
    _(rightView).addClass('notrans'); 

    if (fromLeft) { 
     if (!rightFocused) { 
      _(leftView).css({ 'left' : '-100%' }) 
      _(rightView).css({ 'left' : '-50%' }); 
     } else _(leftView).css({ 'left' : '-50%' }); 
    } 

    if (fromRight) { 
     if (!leftFocused) { 
      _(leftView).css({ 'left' : '100%' }); 
      _(rightView).css({ 'left' : '150%' }); 
     } else _(rightView).css({ 'left' : '100%' }); 
    } 

    _(leftView).removeClass('notrans'); 
    _(rightView).removeClass('notrans'); 

    ...

注意：您看到無處不在的小底線，是我製造和測試一個小型圖書館......而我99％肯定的是，CSS，添加類並刪除類功能的工作。

現在，問題是，當我到達代碼的remove類部分（最後兩行）時，CSS似乎還沒有被應用。所以當它終於做到的時候，我已經刪除了notrans類，並且元素將會隨着轉換而不是無。這可以通過一個1ms的超時來解決，但是會破壞一些其他的東西......所以有人知道通過JS添加CSS屬性是否是異步的，以及如何解決它？:)

Aske K.

來源

2017-04-26 Aske Lange

你能告訴我們庫代碼*實際上添加並刪除樣式*？此外，它不是香草，它是一個圖書館：它只是一個你寫的圖書館。 – msanford

這裏有多少元素受到影響？如果數量非常大，可以說超過5,000，那麼渲染引擎可能沒有完成渲染並計算在css中所做的更改。如果它更像100個元素，那麼情況可能並非如此。 –

@TravisJ這不會使它異步。 – zfrisch

是和否。

當您對JavaScript進行CSS更改時，更改會排隊，然後在JavaScript完成時將所有更改一起應用。

例外：某些屬性導致重新計算完成。例如，獲取諸如offsetHeight之類的度量值會導致瀏覽器應用任何待處理的CSS更改，進行測量，然後繼續。

但是，即使進行了測量，我也不確定transition是否正確應用。簡單的方法是通過在setTimeout(... , 1)或更好的（這被稱爲非常下一幀，在CSS更新之後很好）將其粘貼到removeClass異步

來源

2017-04-26 18:20:02

哦，非常感謝，通過在元素上調用offsetHeight工作，即使在轉換時，你也是一個真正的英雄:) –

說實話，我其實並沒有意識到在JS執行上下文中對css所做的更改已經排隊。你有什麼鏈接，所以我可以多讀一點嗎？ –

@TravisJ不幸的是，我不這樣做。這只是我從我的經歷中獲得的東西之一，而且我知道我在某處讀過它，但這是很久以前的事了。 –

通過vanilla JavaScript異步將css樣式添加到HTML元素中？

回答

相關問題