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
<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');
Top comments (0)