高度过渡

当元素的高度未知时，将其高度从0过渡到auto。

• 使用transition指定对max-height的更改应该过渡。
• 使用overflow: hidden防止隐藏元素的内容溢出其容器。
• 使用max-height指定初始高度为0。
• 使用:hover伪类将max-height更改为由JavaScript设置的--max-height变量的值。
• 使用Element.scrollHeight和CSSStyleDeclaration.setProperty()将--max-height的值设置为元素的当前高度。

[!NOTE]

每个动画帧都会引起回流，如果在过渡高度的元素下有大量元素，会导致卡顿。

<div class="trigger">
  鼠标悬停在我上面以查看高度过渡效果。
  <div class="el">额外的内容</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');