Height transition

鼠标hover时使一个未知高度元素的高度从0过渡到auto。

本实现的思路是：

• 通过js提前将元素的scrollHeight保存在CSS变量--max-height中。
• 元素hover时max-height直接使用--max-height保存的值。

html

<div class="trigger">
  恭喜发财
  <div class="el">红包拿来</div>
</div>

css

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

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

js

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

代码详解

-transition：max-height：0.5s使用默认的ease时间函数在0.5秒内过渡max-height的值。

-overflow：hidden防止超出max-height范围内的子元素内容溢出容器。

-max-height：0指定元素初始的最大高度为0。

-.target：hover> .el指定当hover父级元素时，使其子节点.el的max-height为CSS变量--max-height的值。

-el.scrollHeight指元素包含滚动部分的高度，它将根据元素的内容动态变化。

-el.style.setProperty（...）设置--max-height CSS变量的值为元素的scrollHeight。

以下两点需要注意：

• 由于改变高度的CSS动画会触发页面重排（reflow），所以当需要改变高度的元素内包含大量元素时，会造成动画效果滞后。
• CSS变量已经得到大部分主流浏览器的支持，但是IE除外。兼容性如下：