如何实现CSS过渡下的手风琴折叠布局，内容区高度平滑过渡效果？

本文共计1037个文字，预计阅读时间需要5分钟。

CSS 的 `transition` 只能对可计算的数值类型属性做插值动画，而 `height: auto` 是一个非确定值——浏览器在渲染时会根据内容自动调整高度，没有具体的像素数，因此 `transition` 拿不到起始和结束的数字，自然无法平滑过渡。

常见错误现象是：折叠时瞬间收起、展开时“啪”一下弹出来，或者干脆没动画。

• 不要写 transition: height 0.3s ease + height: auto，这等于没写
• 展开/收起前必须知道目标高度（像素值），哪怕只是临时算出来
• 如果内容动态加载（比如异步填充），得等 DOM 渲染完成再读取 scrollHeight

用 scrollHeight + max-height 替代 height 的实操方案

这是目前最稳定、无需 JS 计算最终 height 值的折中办法：让 max-height 承担过渡职责，利用其可动画性模拟 height 动画。

使用场景：手风琴项内容长度不固定但有合理上限（比如单个面板不超过 500px）。