不能直接用transition作用于height: auto，因auto非数值无法插值；应改用max-height固定值（如500px）配合overflow: hidden实现平滑过渡，或js动态测量scrollheight精确控制高度。
不能直接让 transition 作用于 height: auto，这是 CSS 规范限制，不是写法问题。浏览器无法对 auto 做数值插值，所以动画必然失效——所有“高度过渡一闪而过”或“完全不动”的现象，根源都在这里。
为什么 height: 0 → height: auto 一定失败
Transition 动画需要起止两个可计算的像素值，height: auto 没有确定数值，浏览器无法生成中间帧。哪怕你写了 transition: height 0.3s，只要其中一端是 auto，动画就跳过插值直接渲染最终状态。
- 常见错误写法：
.box { height: 0; transition: height .3s; }+.box.open { height: auto; } - 结果：元素瞬间显示，无过渡
- Chrome 129+ 的
interpolate-size: allow-keywords是例外，但仅限 Chrome，且必须设在父容器上，不能依赖它作为通用解
用 max-height 替代 height 实现“伪 auto”过渡
这是目前兼容性最好、无需 JS 的方案，核心是用一个足够大的固定值模拟 auto，靠 overflow: hidden 隐藏溢出内容。
-
max-height必须设为明确数值（如500px或100vh），不能用auto - 初始状态：
max-height: 0; overflow: hidden; - 展开状态：
max-height: 500px;（需确保真实内容高度 ≤ 该值，否则底部被截断） - 过渡声明写在基础样式里：
transition: max-height 0.3s ease-in-out; - 如果内容高度波动大，可设为
max-height: 100vh，但注意移动端vh可能因地址栏缩放失真
Chrome 129+ 的 interpolate-size 怎么用才生效
这个属性确实能让 height: 0 → height: auto 动起来，但它不是加在目标元素上，也不保证跨浏览器可用。
- 必须写在**直接父容器**上：
.parent { interpolate-size: allow-keywords; } - 目标元素要显式声明初始
height: 0，且transition必须包含height（不能用all） - 展开类中保留
height: auto作为兜底，老浏览器会忽略interpolate-size，只读这一条 - Safari 和 Firefox 截至 2026 年 8 月仍不支持，生产环境必须搭配
max-heightfallback
JS 测量 scrollHeight 设置精确 height 的时机要点
当内容高度不可预估、又要求精确动画（比如 accordion 展开收起），JS 是唯一能真正匹配 auto 的方式，但要注意触发时机。
- 先临时设
height: auto，再读取element.scrollHeight，立刻设回height: 0 - 必须在设
height: 0后强制重排（如调用getBoundingClientRect()），否则后续设目标高度不会触发动画 - 再设
height: ${scrollHeight}px，浏览器才会从 0 插值到该像素值 - 收起时反向操作：先设目标高度，再设
height: 0，中间同样要强制重排 - 避免在循环或高频事件中反复测量，性能敏感场景慎用
真正麻烦的不是选哪种方案，而是混合使用时的细节冲突：比如 max-height 方案里忘了加 overflow: hidden，或者 interpolate-size 写在了子元素上。这些地方一错，整个动画就静音了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
