Home > Developer > Web Develop
But when an element does not set height, its default value is auto, and the browser calculates the actual height.
But what if you want to add CSS3 animations to the heights of a Height:auto block-level element?
From the MDN you can find the Height property in the properties of the CSS support animation as follows:
height ：Yes, as a length, percentage or calc (); The CSS3 transition is supported when the height value is length, percent, or calc ().
So when the element Height:auto, CSS3 animation is not supported.
In addition to the method of obtaining accurate height values via JS, we can actually use max-height instead of height.
As long as we set a height value that is definitely larger than the element's self-growth. Of course, because it is based on the Max-height value of the transition effect, so it is best not to be too big, otherwise the animation effect is not ideal.
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "Utf-8">5 <style>6 *{7 margin:0;8 padding:0;9 }Ten Div{ One A Display:Inline-block; - Overflow:Hidden; - Background-color:Orange; the Max-height:20px; - -webkit-transition:max-height 1s; - transition:max-height 1s; - } + Div:hover{ - Max-height:200px; + } A </style> at </Head> - <Body> - <Div> - <P>I'm not height, it's max-height.</P> - <P>I'm not height, it's max-height.</P> - <P>I'm not height, it's max-height.</P> in <P>I'm not height, it's max-height.</P> - <P>I'm not height, it's max-height.</P> to <P>I'm not height, it's max-height.</P> + </Div> - </Body> the </HTML>
This is my first blog post, hoping to get everyone to learn something. Of course, I would like to receive all the advice I have!
How to add CSS3 to an element with indeterminate height transition
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
