Menu
CSS3 transitions, transforms and animations are wonderful. They are even more now more browsers do support them.
Still there's one thing I keep asking myself: Why isn't the spec definining that CSS3 transitions and animations should handle height:auto?
It doesn't make any sense when we're moving away from fixed layouts with things like the CSS3 flexible box model and media queries.
It doesn't make any sense to use JavaScript just to set a CSS transition with a fixed height.
Now comes my question:
Will the W3C ever specify that height:auto should be supported for CSS3 transitions and animations or can we request them to specify this?
378
We can't transition height , but we can transition max-height , since it has an explicit value. At any given moment, the actual height of the element will be the minimum of the height and the max-height .
For animate the "height" of element with CSS Transitions you need use "max-height". If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.
CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element's class attribute).
The transition-property CSS property sets the CSS properties to which a transition effect should be applied.
You can transition max-height instead: http://jsfiddle.net/leaverou/zwvNY/
89
I'm not sure why they didn't say anything about auto values either, but you can try asking them through their public CSS mailing list. As the transition and animation specs are still working drafts, they might just toss in some changes to address this matter. Good luck!
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
