height: auto 无法参与 CSS transition 动画，因浏览器无法对非数值的 auto 进行插值计算；需用 max-height 模拟或 JS 动态测高实现过渡效果。
transition 对 height: auto 完全无效，不是写法问题，是浏览器根本没法算
浏览器动画引擎只对可量化、可插值的数值做中间帧计算。height: auto 是布局阶段由内容、行高、内边距等实时推导出的结果，它没有固定像素值。你写 height: 0 → height: auto，浏览器看到的是 “0 → ?”，不是 “0 → 248px”，所以直接跳变——DevTools 里能看到高度在 0 和 auto 之间硬切，毫无过渡痕迹。
常见错误现象：展开没动画、收起有动画、AI生成代码直接失效
这些都不是配置漏了 transition，而是底层限制导致的必然表现：
- 点击展开按钮，内容瞬间弹出，毫无动画
- 收起有过渡，展开却没反应（起点是 0，终点是
auto） - 加了
!important或反复读取offsetHeight也无效——这不解决插值缺失的根本问题 - 复制 AI 给的代码：
.box { height: 0; transition: height 0.3s; } .box.open { height: auto; }→ ❌ 白忙一场
用 max-height 模拟 height: auto 的实操要点
这是最轻量、兼容性最好、无需 JS 的方案，但值选错会暴露卡顿或截断：
- 收起态：
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 更稳妥 - 如果内容超限，会视觉截断——所以这个上限值得大于所有子项可能的最大高度
真正需要精确匹配 height: auto 行为时，JS 测高是唯一选择
比如内容动态加载、字体加载延迟、或响应式断点频繁切换高度的场景，max-height 的“够大但不过大”就很难维持：
立即学习“前端免费学习笔记（深入）”；
- 展开前先临时取消
transition，设height: auto，再读offsetHeight - 恢复
transition，并设死该像素值：element.style.height = '248px'; - 收起时先设当前高度 → 下一帧再设
height: 0（用requestAnimationFrame或setTimeout(, 0)） - 动画结束后务必清空内联
height，否则影响后续 JS 计算 - 别在
display: none元素上读高度——得保证元素已渲染且可见（哪怕visibility: hidden+position: absolute也可）
max-height 覆盖 90% 的折叠菜单需求，但一旦内容高度波动剧烈或设计要求严丝合缝，那个看似多此一举的 JS 测高步骤，就是唯一能守住动画精度的防线。 
