在將內聯樣式添加到元素后，如何更改它以使轉換有效？

Question

正如您在下面的代碼中看到的那樣。 如果您更改樣式然后立即再次更改它，則沒有轉換。 但是，如果你稍等一下，它就會起作用。 我想知道是否有任何可以監控的內容，以便知道何時可以再次更改樣式，以便它不會繞過轉換。

 let one = document.getElementById('one'); let two = document.getElementById('two'); one.style.left = '100px'; one.style.left = 0; two.style.left = '100px' setTimeout(()=> two.style.left = 0, 100); 

 div { position: absolute; width: 100px; height: 100px; border: solid; transition: left 1s; } #two { top: 150px; } 

 <div id='one'></div> <div id='two'></div> 

編輯：這似乎是使用無延遲setTimeout的簡單情況，實際上這對我的示例代碼有效。 但是，在我的實際代碼中不起作用。 我不確定發生了什么。 我無法做一個不起作用的簡單例子，但我猜它與頁面上有更多內容有關。

Answer 1

你正以錯誤的方式接近你的問題。

實際上，如果將setTimeout持續時間更改為0秒，則轉換將起作用。

 let one = document.getElementById('one'); let two = document.getElementById('two'); one.style.left = '100px'; one.style.left = 0; two.style.left = '100px' // Change timeout duration to 0 setTimeout(()=> two.style.left = 0, 0); 

 div { position: absolute; width: 100px; height: 100px; border: solid; transition: left 1s; } #two { top: 150px; } 

 <div id='one'></div> <div id='two'></div> 

但為什么？ 如果持續時間為0，是不是意味着它會立即運行？

是的，但沒有。

當您立即分配時：

two.style.left = '100px'
two.style.left = 0

事情處理得如此之快，以至於在渲染引擎獲取數據時， two已經在left: 0 。 所以不會發生過渡。

當您使用setTimeout ，它基本上將任務排隊到當前隊列的末尾。 因此，它為渲染提供了時間來注冊left = '100px' ，然后left = 0 。

從本質上講，您可以不必也不必監控何時可以更改樣式。 您需要做的就是將作業排到“下一個刻度”。

上述說明過於簡化。 有關更多信息，請參閱此問題 。 有關演示和一些詳細說明，請參閱此問題 。

Answer 2

這在我的示例代碼和我的真實代碼中完成了這項工作。

 let one = document.getElementById('one'); let two = document.getElementById('two'); one.style.left = '100px'; one.style.left = 0; let left = two.getBoundingClientRect().left; two.style.left = '100px' let i = setInterval(()=>{ if (two.getBoundingClientRect().left != left) { two.style.left = 0; clearInterval(i); } }); 

 div { position: absolute; width: 100px; height: 100px; border: solid; transition: left 1s; } #two { top: 150px; } 

 <div id='one'></div> <div id='two'></div>