CSS3 transition on table row using height property
- by Alexis Leclerc
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;
-ms-transition: height 0.1s ease-in-out;
-o-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!
