使用高度属性在表格行上进行 CSS3 过渡答案

【问题标题】：CSS3 transition on table row using height property使用高度属性在表格行上进行 CSS3 过渡
【发布时间】：2023-12-29 20:28:01
【问题描述】：

我有一个 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;

有没有想过为什么我的小提琴不做任何动画？您还有其他建议的方法吗？

谢谢！

【问题讨论】：

顺便说一句，除了早期的 IE10 测试版之外，-ms-transition 不存在，而且 -o-transition 也不是真正需要的 - 新版本不使用它。 -moz-transition 自 Firefox 16 起就不再需要了。但仍然需要 -webkit-，当然还有真正的版本！
我想这就是为什么它们总是有不同的颜色。谢谢指出！

【解决方案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);

【讨论】：