Sometimes, we want to transition height: 0; to height: auto; using CSS.
In this article, w’ell look at how to transition height: 0; to height: auto; using CSS.
How to transition height: 0; to height: auto; using CSS?
To transition height: 0; to height: auto; using CSS, we set the max-height.
For instance, we write
<div id="menu">
<a>hover me</a>
<ul id="list">
<!-- ... -->
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
to add a div with a ul.
Thenw we write
#menu #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
background: #d5d5d5;
}
#menu:hover #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
to set the max-height of the list.
And we set the transition property to the effect with the max-height applied at the end.
Conclusion
To transition height: 0; to height: auto; using CSS, we set the max-height.
