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，而是底层限制导致的必然表现：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 点击展开按钮，内容瞬间弹出，毫无动画
• 收起有过渡，展开却没反应（起点是 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 测高步骤，就是唯一能守住动画精度的防线。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！