Menu
please see the following jsFiddle
http://jsfiddle.net/SgyEW/10/
You can click the various buttons which shows different length content which causes the box to grow/shrink.
I want the height change to be animated so it is not so jumpy, I tried this by adding:
-webkit-transition: all 1s linear; But that has no effect in this use case. Any ideas in terms of a solution that doesn't require JavaScript?
Thanks
801
We use css property height: calc( 100% - div_height ); Here, Calc is a function. It uses mathematical expression by this property we can set the height content div area dynamically.
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.
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 .
I'm afraid there is no way of animating height with CSS3 transitions without some Javascript assistance, check out:
How can I transition height: 0; to height: auto; using CSS?
Can you use CSS3 to transition from height:0 to the variable height of content?
Additionally, your code goes from display: none to display: block, which wouldn't have an effect on height in any case. Instead of display none use height: 0 with overflow: hidden;
148
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
