max-height 无法从 0 平滑过渡到 auto，因 auto 非可动画值，必须用具体像素值（如 500px）替代；设值需略超实测最大高度（建议×1.2～1.5），过大则动画迟滞，过小则内容截断。
直接用 max-height 做手风琴动画，看似简单，但实际会卡顿、收不严、展开后内容溢出——根本原因是 max-height 无法自动适配未知高度，必须手动设一个“足够大但不过分”的临界值。
为什么 max-height: 0 → max-height: auto 不生效
CSS 的 transition 不支持 auto 值的插值计算，浏览器遇到 max-height: auto 就直接跳过过渡，变成瞬时展开。这是最常被忽略的底层限制。
- 必须用具体像素值（如
max-height: 500px）替代auto - 这个值得大于面板内所有可能内容的最大高度，否则动画中途截断
- 设太大（比如
9999px）会导致动画变慢、视觉延迟感明显 - 响应式场景下，文字换行、字号变化都会影响真实高度，需预留余量
如何选一个靠谱的 max-height 上限值
没有银弹，但可以按内容类型分级估算：纯文本段落一般不超过 3–4 行，带图片或表单的面板要单独测。别凭感觉写 300px，先用 DevTools 测真实展开高度。
- 打开浏览器开发者工具，手动展开面板，选中内容容器，看
Computed面板里的height值 - 取实测最大值 × 1.2～1.5 作为
max-height（例如实测 210px → 设260px） - 如果内容高度差异极大（比如有的空、有的含长列表），优先保障高频场景，低频超高的用 JS 动态设（见下一条）
- 避免用
em或rem单位，字体缩放时它们会变，导致临界值失效
用 overflow: hidden 配合 height 还是 max-height？
用 height + overflow: hidden 看似更“精确”，但必须配合 JS 获取真实 scrollHeight，否则照样卡顿；而 max-height 方案虽要估上限，却完全 CSS 驱动，适合静态内容或高度可控的场景。
- 纯 CSS 手风琴：坚持用
max-height，搭配合理上限值 +overflow: hidden - 内容高度不可预知（如用户输入、异步加载）：放弃纯 CSS，改用 JS 获取
element.scrollHeight后动态设置max-height -
height: 0+overflow: hidden不能替代max-height，因为height过渡无法从0平滑到auto，一样会跳
真正难的不是写那几行 CSS，而是判断内容高度是否稳定——一旦有字体加载、图片懒加载、动态插入 DOM 这些行为，max-height 的临界值就容易失准，这时候就得切到 JS 方案，而不是硬调像素值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
