transition 对 height: auto 无效，因 auto 非数值无法插值；应改用 max-height 搭配 overflow: hidden 模拟动画，值需合理估算；动态高度场景须用 scrollHeight + requestAnimationFrame 精确控制。
transition 对 height: auto 完全无效，这不是写法问题，是浏览器根本没法算
你写的 transition: height 0.3s + height: 0 → height: auto，动画一定不触发。因为 height: auto 不是一个数值，而是布局阶段才由内容、行高、内边距等实时推导出的结果。浏览器看到的是 “0 → ?”，不是 “0 → 248px”，插值引擎直接放弃计算中间帧，结果就是元素“啪”一下硬切出来。
常见错误现象包括：
-
height: 0切到height: auto后瞬间展开，毫无过渡 - 收起时有动画，但展开没反应（起点是 0，终点是不可插值的
auto） - 加了
!important、反复读取offsetHeight或强制重排也无效
用 max-height 替代 height 是最稳妥的纯 CSS 方案
核心思路：把不可插值的 height: auto 换成可插值的 max-height，再配合 overflow: hidden 视觉模拟“自动撑开”。
实操要点：
- 收起态：
max-height: 0+overflow: hidden - 展开态：
max-height: 500px（不能是none或auto，必须是具体数值） - 过渡必须显式声明：
transition: max-height 0.3s ease-in-out（别依赖transition: all） - 值怎么选？粗略估算 =
line-height × 最大行数 + padding × 2 + border × 2；比如行高 24px、最多 10 行、上下 padding 各 12px → 24×10 + 24 = 264px，取整到300px更稳妥
max-height 值设太大或太小都会出问题
这个数值不是随便填的，它直接影响动画观感和渲染行为：
- 设太小（比如
max-height: 200px），而内容实际高度 300px，动画会在 200px 处戛然而止，底部被截断 - 设太大（比如
max-height: 9999px），20px 高的内容也要按 9999px 过渡，前半段几乎不动，用户感觉“卡顿”或“慢吞吞” - 移动端尤其敏感：过大的
max-height可能触发额外的重排/重绘，影响滚动性能 - 如果内容高度动态变化（如用户编辑文本、加载异步内容），静态
max-height可能不够或过剩，这时就得换 JS 方案
真正需要精确高度动画时，scrollHeight + requestAnimationFrame 是唯一可靠路径
当内容高度不可预估、或会动态变化（比如富文本编辑器、评论区折叠），max-height 就力不从心了。这时必须用 JS 获取真实高度：
- 先设
height: 0+overflow: hidden - 展开前，强制触发重排：
element.offsetHeight（读取当前高度） - 再设
height: element.scrollHeight + 'px' - 用
requestAnimationFrame确保样式应用在下一帧，避免同步阻塞 - 收起时同理：先读
offsetHeight，再设height为该值，最后在 transition 结束后设回height: 0
这个流程绕不开 DOM 读写顺序，错一步动画就断掉——这也是为什么很多人宁愿用 max-height 硬凑，也不愿碰 JS 测高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
