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

  • transition: max-height: 0.5s cubic-bezier(...) specifies that changes to max-height should be transitioned over 0.5 seconds, using an ease-out-quint timing function.
  • overflow: hidden prevents the contents of the hidden element from overflowing its container.
  • max-height: 0 specifies that the element has no height initially.
  • .target:hover > .el specifies that when the parent is hovered over, target a child .el within it and use the --max-height variable which was defined by JavaScript.
  • el.scrollHeight is the height of the element including overflow, which will change dynamically based on the content of the element.
  • el.style.setProperty(...) sets the --max-height CSS variable which is used to specify the max-height of the element the target is hovered over, allowing it to transition smoothly from 0 to auto.
  • 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.

预览

Hover me to see a height transition.

Additional content



HTML

<div class="trigger">
  Hover me to see a height transition.
  <div class="el">Additional content</div>
</div>

CSS

.el {
  transition: max-height 0.5s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}

JavaScript

let el = document.querySelector('.el');
let height = el.scrollHeight;
el.style.setProperty('--max-height', height + 'px');

翻译自:https://www.30secondsofcode.org/css/s/height-transition