30-seconds-of-code/snippets/height-transition.md

title, type, tags, cover, dateModified

title	type	tags	cover	dateModified
Height transition	snippet	animation	washed-ashore	2020-12-30T15:37:37+02:00

Transitions an element's height from 0 to auto when its height is unknown.

• Use transition to specify that changes to max-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 of 0.
• Use the :hover pseudo-class to change the max-height to the value of the --max-height variable set by JavaScript.
• Use Element.scrollHeight and CSSStyleDeclaration.setProperty() to set the value of --max-height to the current height of the element.
• Note: Causes reflow on each animation frame, which will be laggy if there are a large number of elements beneath the element that is transitioning in height.

<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');