css - 使用高度属性在表格行上进行 CSS3 过渡

Question

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

像这样的东西：

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

目前，一切正常（向下钻取风格），但我想在加载行中添加一些动画。我发现一个问题（这个）有一个 JSFiddle 显示我想要的东西（这个小提琴）。

我试图用 CSS3 过渡来实现类似的东西，但我无法让它工作。这是我使用这些转换的模拟尝试（小提琴仅用于部署加载行）：

-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);