CSS3 transition on table row using height property

Question

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.

Something like this:

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

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

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?

Thanks!

Blague

Just by the way, -ms-transition didn't ever exist other than in an early IE10 beta, and -o-transition isn't really needed either - new versions don't use it. -moz-transition hasn't been needed since Firefox 16. -webkit- is still needed though, and of course the real version! – Aslam

I guess that's why they're always in a different color. Thanks for pointing out! – Blague

Answer 1

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.

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

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

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

Walley

That's interesting, I'll give it a shot! – Blague

It works great, thanks for the reply! I'm not very familiar with jQuery but I'll try playing with this method for the other animations. – Blague