height: 0 → height: auto 无法平滑过渡，因auto非数值，浏览器无法插值；最稳方案是max-height替代+overflow: hidden，设足够但不过量的上限值并仅对max-height做transition。
不能直接让 height: 0 平滑过渡到 height: auto——浏览器根本不会动画，只会瞬间跳变。这是 CSS 规范层面的限制，不是写法或兼容性问题。
为什么 height: 0 → height: auto 永远不触发过渡
因为 auto 不是数值，浏览器无法在帧之间插值计算中间高度。你写的 transition: height 0.3s 会被忽略，展开/收起都是 layout 瞬间完成，没有中间状态。这不是 bug，是设计如此。
常见错误现象：
- 元素“啪”一下弹出来，毫无缓动
- 用
all做 transition（如transition: all 0.3s）依然无效 - 加了
overflow: hidden但没配对max-height，结果内容被裁又不缩放
最稳方案：max-height 替代 + overflow: hidden
这是目前兼容性最好、无需 JS、能覆盖 99% 场景的解法。关键不是设多大，而是设得“够用且不过量”。
实操要点：
- 初始状态必须是
max-height: 0+overflow: hidden（只写height: 0没用） - 展开状态设为一个固定上限，比如
max-height: 500px；这个值要略大于内容最大可能高度，但别设成10000px，否则动画拖沓、影响性能 -
transition必须只作用于max-height，例如transition: max-height 0.3s ease-in-out；混入height或opacity会导致行为不可控 - 如果内容有
padding或border，它们不会随max-height缩放，收起时边缘会“抽搐”，需额外用padding动画或transform: scaleY()补齐
替代方案：用 clip-path 或 grid-template-rows
当内容高度差异极大、或无法预估上限时，max-height 容易失守。这时两个纯 CSS 方案更可靠：
-
clip-path: inset(0 0 100% 0) → clip-path: inset(0)：视觉裁剪，支持auto，Chrome 55+/Firefox 54+/Safari 15.4+ 都行，不用预设尺寸 -
grid-template-rows: 0fr → minmax(0, max-content)：需父容器为display: grid，子项设overflow: hidden；它插值的是比例而非像素，所以真正平滑，但 Safari 16.4+ 才稳定，旧版仍有抖动
注意：interpolate-size: allow-keywords 虽在 Chrome 129+ 可用，但它必须写在父容器上、且 Safari/Firefox 完全不支持，无 fallback 就等于功能残缺，不建议主用。
JS 辅助方案：读取 scrollHeight 后设 height
仅当内容完全动态、服务端渲染后 JS 才加载、或内部有复杂 flex/grid 嵌套导致 CSS 方案失效时才考虑。
关键步骤：
- 展开前先设
height: 0+overflow: hidden - 立即读取
el.scrollHeight（注意：必须在设height: 0后强制重排，例如读一次el.offsetHeight，否则 scrollHeight 可能不准） - 再设
height: ${scrollHeight}px，触发过渡 - 收起时反向操作，但要注意：若内容高度变化频繁，需防重复绑定和内存泄漏
真正难的不是选哪个方案，而是意识到：只要涉及高度自适应动画，就必然要在「精度」「兼容性」「布局侵入性」三者中做取舍——没有银弹，只有权衡点不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
