使用height属性在表行上进行CSS3过渡 [英] CSS3 transition on table row using height property

问题描述

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

I have an HTML table displaying some information with a few rows. On each row, the user can click to reveal some additional rows that contains information related to the clicked row.

类似这样的事情:

在使用AJAX请求创建其他行的同时，在单击的行之后立即插入了一个加载行:

While the additional rows are being created with an AJAX request, a loading row is inserted right after the clicked row :

当前，一切正常(向下钻取样式)，但是我想在加载行中添加一些动画. 我发现了一个带有JSFiddle的问题(这个问题)显示我想要的种类(这把小提琴).

Currently, everything works perfectly (drill down style), but I would like to add some animation to the loading row. I found a question ( this one ) that has a JSFiddle showing kind of what I want ( this fiddle ).

我尝试实现与CSS3过渡类似的功能，但无法使其正常工作. 这是我使用以下转换的模拟尝试(仅用于部署加载行的):

I tried to implement something similar with CSS3 transitions, but I can't get it to work. Here's my simulated attempt ( fiddle only for deployment of the loading row ) using these transitions :

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

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

Any thought on why my fiddle doesn't do any animation? Any other methods you would propose?

谢谢！

推荐答案

我不清楚您的问题是否要求使用CSS过渡.我继续根据您的示例jsfiddle假设使用jQuery也是可以接受的.

I'm not clear from your question if using CSS transitions is a requirement or not. I went ahead and assumed based off your example jsfiddle that using jQuery instead is acceptable.

我创建了一个 jsfiddle 来显示此内容，但是基本上我所做的是删除了CSS过渡并设置新行以使用javascript在加载时隐藏

I created a jsfiddle to show this, but basically what I did was remove the CSS transitions and set up new rows to be hidden on load using javascript

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

然后，我使用您示例中的slideToggle函数将新行放到适当位置.

Then I use the slideToggle function from your example to ease the new row into place.

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

这篇关于使用height属性在表行上进行CSS3过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！