使用height属性在表行上进行CSS3转换

Question

我有一个HTML表格，显示一些包含几行的信息。在每一行上，用户可以单击以显示一些其他行，其中包含与单击的行相关的信息。

这样的事情：

在使用AJAX请求创建其他行时，在单击的行之后插入加载行：

目前，一切都很完美（向下钻取样式），但我想在加载行中添加一些动画。 我发现了一个问题（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;

为什么我的小提琴不做任何动画？ 你会提出的任何其他方法吗？

谢谢！

Answer 1

我不清楚你的问题是否要求使用CSS过渡。我继续并假设你的示例jsfiddle，使用jQuery是可以接受的。

我创建了一个jsfiddle来展示这一点，但基本上我所做的就是删除CSS转换并设置新行，以便在加载时使用javascript隐藏

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

然后我使用你的例子中的slideToggle函数来简化新行。

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