height: auto 无法参与 transition，因 auto 非数值、不可插值；可用 max-height 模拟（设足够但不过大的具体值）、grid-template-rows + fr 单位（需 display: grid 和 overflow: hidden）或 js 动态测高（用 scrollheight + requestanimationframe）。
transition 对 height: auto 完全无效，不是写法不对，是浏览器根本没法算——auto 不是数字，没有像素值，插值无从谈起。
为什么 height: auto 不能参与 transition
CSS 动画引擎只对可量化、可插值的数值做中间帧计算。height: auto 是布局阶段由内容、字体、行高、内边距等实时推导出的结果，它没有固定量纲。你写 height: 0 → height: auto，浏览器看到的是“0 → ?”，不是“0 → 248px”，所以直接跳变，DevTools 里能看到高度在 0 和 auto 之间硬切，毫无过渡痕迹。
常见错误现象包括：
- 点击展开按钮，内容瞬间弹出，毫无动画
- 收起有过渡，展开却没反应（因为起点是
0，终点是auto） - 加了
!important或反复读取offsetHeight也无效——这不解决底层限制
用 max-height 模拟 height: auto 的实操要点
这是最轻量、兼容性最好、无需 JS 的方案，核心是用一个“够大但不过大”的具体数值替代 auto。
- 收起态：
max-height: 0; overflow: hidden; - 展开态：
max-height: 500px;（别用none或fit-content，它们不可插值） - 必须显式声明过渡：
transition: max-height 0.3s ease-in-out;（不能只靠all） - 值怎么选：粗略估算 =
line-height × 最大行数 + padding × 2 + border × 2；例如行高 24px、最多 10 行、上下 padding 各 12px → 24×10 + 24 = 264px，取整到300px更稳妥 - 响应式场景下，
max-height: 40rem比px更安全（rem 随根字号缩放）
注意：设太小会裁剪内容；设太大（比如 9999px）会导致动画拖尾——20px 高的内容也要“走完”9979px 的插值距离。
用 grid-template-rows + fr 单位实现真自适应过渡
当内容高度完全不可预估（如用户编辑的富文本、异步加载的评论流），max-height 的魔法数字就变成维护负担。此时 Grid 是更干净的解法，但它要求重构布局。
- 父容器必须是
display: grid，目标区域需为独立一行（用grid-row或命名轨道） - 收起态：
grid-template-rows: [header] auto [content] 0fr [footer] auto; - 展开态：
grid-template-rows: [header] auto [content] 1fr [footer] auto; - 必须配
transition: grid-template-rows 0.3s ease;（只写all不生效） - 务必加
overflow: hidden到容器上，否则0fr行仍可能撑开并显示内容 - IE 全系不支持该过渡，必须 fallback 到
max-height方案
0fr ≠ 高度为 0px，它只是分配零份空间，但布局流仍在；若要彻底隐藏，overflow: hidden 不可省。
JS 动态测高是唯一能 100% 精确的路径
当内容高度动态变化频繁，且你无法接受任何截断或拖尾时，JS 是绕不开的选择。关键不是“能不能读”，而是“什么时候读才准”。
- 元素必须已插入 DOM，且不能是
display: none或visibility: hidden - 推荐用
element.scrollHeight（比offsetHeight更可靠，含 padding） - 读取后需用
requestAnimationFrame触发重排，再设height: ${scrollHeight}px - 过渡结束后，可清除内联
height，回归height: auto以适配后续内容变动 - 字体未加载完成、CSS 尚未生效、DOM 未挂载，都会导致
scrollHeight读为 0 或偏小——务必在DOMContentLoaded后、字体加载完成回调中执行
最容易被忽略的一点：max-height 和 grid-template-rows 都是“模拟方案”，它们依赖前提条件；而 JS 测高虽重，却是唯一能跟上真实渲染高度的路径——尤其在富文本编辑器、实时聊天窗口这类场景里，少一次 requestAnimationFrame，就可能多一次错位动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
