CSS 如何实现动态高度过渡动画？

Question

CSS 如何实现动态高度过渡动画？

仓乃文 · Accepted Answer

CSS transition 不支持 height: auto 的过渡动画，可以利用 max-height 的特性来实现动态高度的伸缩动画。

```css
.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.collapsible.open {
  max-height: 1000px;
}
```

补充说明：
- max-height 只是限制最大高度，当容器实际高度未达到限制值时不会继续变高，从而实现动态高度展开
- max-height 的值只需比实际内容高度大即可，但不能设置太高，否则动画会有延迟感（实际高度 200px，max-height 1000px，1s 动画实际只有 0.2s）
- 替代方案：现代浏览器可使用 grid-template-rows: 0fr 到 1fr 的过渡