如何觸發附加到使用Javascript的DOM元素的CSS3轉換？

我正在用javascript構建一個甘特圖樣式日程視圖，並且試圖讓我的約會從左側過渡到它們的絕對定位內嵌值。我想使用CSS3轉換來處理這個問題。如何觸發附加到使用Javascript的DOM元素的CSS3轉換？

個人約會是通過JavaScript添加和繪製，看起來像這樣的標記;

<div class="appt" style="width: 12.5%; left: 32.5874%;"></div>

的.appt類有-webkit-transition: all .3s ease-in;與top: 0; left: 0聲明。

我認爲，當這些約會被附加到DOM他們會動畫到他們的內聯樣式職位。我怎樣才能做到這一點？

這是一個相關的，簡單的例子。 http://codepen.io/aaronlsilber/pen/ocqFl

在追加它之前，通過設置left: 0觸發CSS轉換，然後在發生追加後通過.css（）jQuery函數更改內聯css的內容。

例子：

$('<div class="appt" style="width: 12.5%; left: 32.5874%;"></div>').appendTo(/*ELEMENT*/); 

$('.appt').css('left', '32.5874%');

警告：並非所有的瀏覽器支持CSS transistions（如IE9），如果這種影響是一個必須爲您的用戶體驗，我會建議使用jQuery .animate（）

2012-10-25 20:01:36 adamb

更好的是，使用[jQuery Transit]（http://ricostacruz.com/jquery.transit/），它將在可用時使用CSS3，並在不存在時退回到jQuery.animate。 –

回答