如何使用轉換的css元素除最初？

Question

如果我有一個css樣式如下：

.transition { 
    transition: left linear .4s; 
    -moz-transition: left linear .4s; 
    -o-transition: left linear .4s; 
    -webkit-transition: left linear .4s; 
} 

和下面的HTML：

<div id="mydiv">Test</div> 

及以下的jQuery：

$(function() { 
    $('#mydiv').css('left', '50px'); 
    $('#mydiv').addClass('transition'); 
}); 

然後還有一個過渡從頁面加載時從0px到50px，儘管在jss中設置了css left屬性之後，過渡類不會添加到mydiv中。

我希望能夠在最初的後設置初始CSS加載頁面時（這是基於各種參數計算）和不進行動畫mydiv留下的財產，但仍有過渡屬性設置爲頁面加載（頁面加載後移動mydiv應該是動畫）。

我該如何做到這一點？

Answer 1

您可以將該位置應用於準備好的dom，並在頁面加載時進行轉換。試試this fiddle。

$(function() { 
    $('#mydiv').css('left', '50px'); 
}); 

$(window).load(function(){ 
    $('#mydiv').css('left', '100px'); 
    $('#mydiv').addClass('transition'); 
}); 

您需要在應用兩種樣式之間分開。你可以用setTimeout完成同樣的效果。