使用高度屬性的表格行上的CSS3轉換

我有一個HTML表格顯示一些信息與幾行。在每一行上，用戶可以點擊以顯示一些其他行，其中包含與點擊行相關的信息。使用高度屬性的表格行上的CSS3轉換

事情是這樣的： Deployed rows

當正在用AJAX請求創建的其他行，裝載行的點擊行之後插入： Loading row

目前，一切完美（鑽下來樣式），但我想向加載行添加一些動畫。我發現一個問題（this one），它有一個JSFiddle，顯示我想要的東西（this fiddle）。

我試圖實現類似的CSS3轉換，但我不能讓它工作。下面是使用這些轉變我的模擬嘗試（fiddle only for deployment of the loading row）：

-webkit-transition: height 0.1s ease-in-out; 
-moz-transition: height 0.1s ease-in-out; 
transition: height 0.1s ease-in-out;

爲什麼我的小提琴不會做任何動畫任何想法？你會建議的其他方法嗎？

謝謝！

順便說一句，除了早期的IE10測試版之外，-ms-transition並不存在，並且-o-transition也不是真的需要 - 新版本不使用它。 -moz-transition從Firefox 16開始並不需要。-webkit-仍然需要，當然還有真正的版本！ –

我想這就是爲什麼他們總是以不同的顏色。感謝您指出！ –

我不清楚你的問題，如果使用CSS轉換是一個需求與否。我繼續前進，並假設基於您的示例jsfiddle，而不是使用jQuery是可以接受的。

我創建了一個jsfiddle來證明這一點，但基本上我所做的是刪除CSS轉換和使用JavaScript

loadingRow.className = "deployable"; 
    jQuery(loadingRow).attr("style","display: none;");

然後建立新的行負荷被隱藏我使用的slideToggle功能從你的榜樣以緩解新的行。

loadingRow.style.height = "400px"; 
    jQuery(loadingRow).slideToggle(2000);

2013-06-26 16:41:57

這很有趣，我會給它一個鏡頭！ –

它的效果很好，謝謝你的回覆！我對jQuery不是很熟悉，但我會嘗試使用這種方法來處理其他動畫。 –

太好了。很高興它對你有效！ –

回答