height: auto 无法参与 transition，因其非数值属性，浏览器无法插值；应改用 max-height、js 测高或 grid-template-rows 等替代方案。
直接写 height: 0 → height: auto 不会触发过渡，这不是你 CSS 写错了，是浏览器压根没法算——auto 不是数字，没有像素值，插值无从谈起。
为什么 height: auto 无法参与 transition
动画引擎需要明确的起始和结束数值（比如 0px → 248px）才能生成中间帧。height: auto 是布局阶段动态计算的结果，不是固定量纲值。DevTools 的 Computed 面板里看到的 height: auto 就是失效信号：它永远不等于某个像素数，所以浏览器直接跳变，不走过渡流程。
常见错误现象包括：
- 点击展开按钮，内容“啪”一下弹出，毫无缓动
- 收起有动画，展开却瞬间完成（起点是
0，终点是auto） - 加了
!important、反复读offsetHeight或强制重排都无效——问题不在 DOM 状态，而在属性本身不可插值
用 max-height 替代 height 的实操要点
这是最轻量、兼容性最好（IE10+）、无需 JS 的方案，核心是用一个“够大但不过大”的具体数值替代 auto。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 收起态：
max-height: 0+overflow: hidden（缺一不可，否则内容撑开容器） - 展开态：
max-height: 300px（不能写none或fit-content，它们不可插值） - 必须显式声明：
transition: max-height 0.3s ease-in-out（靠transition: all不可靠） - 值怎么选：
– 粗略估算 =line-height × 最大行数 + padding-top + padding-bottom + border-top + border-bottom
– 响应式场景优先用max-height: 40rem（比 px 更适应字号缩放）
– 设太小会裁剪内容；设太大（如9999px）会导致动画拖尾——80px 高的内容也要“走完”9919px 的距离
当内容高度真没法预估时，JS 测高是唯一可靠路径
比如富文本编辑器、用户评论流、动态加载的菜单项，max-height 方案必然妥协。此时必须 JS 出手，关键在读取时机和重排控制：
- 元素必须已挂载、可见（
display: none下读scrollHeight永远是0；可用visibility: hidden+position: absolute临时隐藏） - 先设
height: 0+overflow: hidden，再用element.scrollHeight读真实高度 - 用
requestAnimationFrame触发一次重排，再把height设为具体像素值（避免同步读写冲突） - 动画结束后清除内联
height，回归height: auto，否则后续内容变动会卡死
最容易漏掉的是字体加载完成前就读高度——font-face 还没就绪，scrollHeight 就偏小，导致动画中途截断。
grid-template-rows + fr 单位的替代思路
如果你能重构布局，Grid 是绕过高度控制本身最干净的方案，特别适合折叠面板、响应式菜单等场景：
- 容器需有明确高度（
height或min-height），否则fr无参照 - 用
grid-template-rows: auto 0fr→auto 1fr控制某一行的“展开/收起”，0fr合法且可插值（比例系数，非像素） - 必须配
overflow: hidden在容器上，否则内容溢出 - Safari 旧版本对
grid-template-rows过渡支持弱，推荐改用grid-row属性过渡（grid-row: 1 / 2→grid-row: 1 / -1）
真正麻烦的从来不是“怎么让高度动起来”，而是判断该用哪条路：内容高度稳定？选 max-height；动态性强且要求精准？JS 测高；能改布局且要长期维护？Grid 更可控。别在 height: auto 上硬刚——它天生就不属于动画体系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
