Height transition
Transitions an element's height from 0
to auto
when its height is unknown.
- Use
transition
to specify that changes tomax-height
should be transitioned over. - Use
overflow: hidden
to prevent the contents of the hidden element from overflowing its container. - Use
max-height
to specify an initial height of0
. - Use the
:hover
pseudo-class to change themax-height
to the value of the--max-height
variable set by JavaScript. - Use
Element.scrollHeight
andCSSStyleDeclaration.setProperty()
to set the value of--max-height
to the current height of the element.
<div class="trigger"> Hover me to see a height transition. <div class="el">Additional content</div> </div>
.el { transition: max-height 0.3s; overflow: hidden; max-height: 0; } .trigger:hover > .el { max-height: var(--max-height); }
let el = document.querySelector('.el'); let height = el.scrollHeight; el.style.setProperty('--max-height', height + 'px');