CODEWITHSUNDEEP
javascriptcsstransformtransition
cc young
cc young

Reputation: 20235

with css3, how to make table row expand/contract slowly?

would like to gradually "open" and "close" row in a table, with the rows beneath being pushed down or pulled up as appropriate.

am able to get div to expand / contract by using transition for timing and transform for sizing (unable to use height)

sample.css

h1 { transition all 600s linear; }
h1.sqeeze {  transform scale( 1.0, 0.0 ); }

but this has no effect on the surrounding environment. the h1.squeeze effectively goes to a 0px height, but the blocks following the h1 remain as they were.

what I'd like is a mechanism where something can be expanded / contracted, like a tr or div or li, and the surrounding blocks respond my making room or by taking the space newly available - like display: none; in slow motion.

Upvotes: 1

Views: 1577

Answers (2)

Clxy
Clxy

Reputation: 525

I made a fiddle here.(Added the click operation.)

Css code looks like

transition:height 2s;

You can try it to see whether i understood what you wanted or not.

Upvotes: 3

Rafael Fontes
Rafael Fontes

Reputation: 1353

To do that u would need way more code because you can't set the size of all childs based on the parent size. Things like text and fixed size will not contract. I would suggest that you fade in/out with alpha instead.

Upvotes: 0

Related Questions