Transitioning 'height: auto;'
December 30, 2019
Animating the height of an element using transition
doesn't work when the element is transitioning to or from the value auto
. Instead you can often achieve the desired effect by animating max-height
to a target value that you know will cover your desired range.
.menu {
min-height: 50px;
max-height: 50px;
transition: max-height 0.3s;
}
.menu.open {
max-height: 400px;
}