css-transition height from 0 to auto
If you are facing issues with the transition of a element from height: 0
to height: auto
, resulting in a jerky or stuck animation, there is a simple solution to this problem.
The problem arises because the final height of the element is unknown as it depends on the content inside it. CSS transitions work by calculating the difference between the initial and final states of a property and animating that difference over a specified duration. However, since the final height of the element is not known in advance, the browser cannot calculate the difference and therefore cannot create a transition between the two states.
max-height
One solution to this problem is to use max-height
instead of height
. Set a value for max-height
that is larger than the actual height of the element. The transition will be smooth because the browser knows the final max-height
of the element. The height
of the element can still be auto
.
However, be sure not to set the max-height
value too high. The larger the value is, the faster the animation will be. For example, if the actual height
of the element is 500px
, but you set max-height
to 5000px
. The transition will animate from 0 to 5000 in duration time. This means that the 500px
of height
will only use one fifth of duration time to animate. Therefore, it’s better to set the max-height
value as close to the actual height of the element as possible to ensure that transition’s duration is accurate.
.start {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s ease-out;
}
.end {
/* actual height is less than 500px */
max-height: 500px;
}
hover to show
- content 1
- content 2
- content 3
- content 4
References
How can I transition height: 0; to height: auto; using CSS? - stackoverflow