設置css轉換之間的最小時間間隔

Question

我想立即設置一些css屬性爲某個值，然後從此值開始轉換到另一個值。 我需要多次撥打電話。 當我第一次運行時，或者我在控制檯上一步一步地按預期工作，但是當在單個javascript函數中執行時，除非使用setTimeout強制延遲，否則它不起作用。

運行控制檯行由行工作，但被稱爲一次全部上並不：

el.style.transition = ''; // no transition from now 
el.style.left = '50px'; // set instantly to 50 
el.style.transition = '1s'; // 1s transition from now 
el.style.left = '250px'; // animate from 50 to 250 

這裏是jsfiddle演示。

因此，問題是 - 我如何更新css轉換，以確保它可以工作，和/或當我更新css轉換時，我如何知道是否/何時開始影響其他屬性我想動畫？

更新：

從我的測試中，是好像設置過渡性質的作品在某種程度上異步方式，但我找不到任何方法來設置回調的變化。

Answer 1

我得到了解決方案（http://jsfiddle.net/9wsrv0mg/9/）。

訣竅是讀取一些強制瀏覽器js和渲染線程同步的DOM屬性。

所以，這將工作：

el.style.transition = ''; 
el.style.left='50px'; 
var tmp = el.offsetLeft; // HERE COMES THE MAGIC - reading this prop forces delay we need 
el.style.transition = 'left 1s'; 
el.style.left='250px'; 

Answer 2

設置過渡到：

el.style.transition="left 1s linear 1s"。

您需要使用CSS3 transition-delay屬性，但可以在更廣泛的transition屬性中對此屬性進行設置。這允許設置幾個轉換選項，其中第四個是延遲時間。

形式語法：[none | < single-transition-property>] || <時間> || <定時功能> || <時間

看到這個fiddle。看起來你最初似乎需要稍微延遲一段時間，以便不會對先前的風格變化採取行動。對於樣式屬性更改沒有回調，因此您只需強制將轉換元素更新到下一個瀏覽器事件循環中。在this的答案中也注意到了。

el.style.transition = 'left 0s linear 0s'; // no transition from now 
el.style.left = '50px'; // set instantly to 50 
setTimeout(function(){ 
    el.style.transition = 'left 1s linear 1s'; // 1s transition from now 
    el.style.left = '250px'; // set instantly to 50 
}, 0);