height: auto 不能参与 transition，因为它是关键字而非数值，浏览器在样式计算阶段无法确定其具体像素值，故无法生成过渡帧；需用 max-height 等可插值属性模拟。
因为 height: auto 不是数值，浏览器根本没法算出“从 0px 到多少 px”，transition 就直接跳过插值，只做硬切。
为什么 height: auto 不能参与 transition
CSS transition 只对可插值的数值型属性起作用——比如 height: 0px → height: 248px，浏览器能逐帧算出中间值。但 height: auto 是一个关键字（keyword），不是像素值；它的真实高度要等 layout 阶段才能确定，而 transition 发生在更早的 style 计算阶段。此时浏览器连“这个 div 最终多高”都不知道，更没法生成过渡帧。
常见错误现象包括：
-
height: 0; transition: height 0.3s;→height: auto;后内容“啪”一下弹出，毫无动画 - 收起有过渡，展开却没反应（起点是 0，终点是
auto） - 加了
!important或反复读取offsetHeight也无效——这不解决底层限制
max-height 模拟的实操要点
这是最轻量、兼容性最好、无需 JS 的方案，本质是用一个“够大但不过大”的具体数值替代 auto，再配合 overflow: hidden 视觉上模拟自动高度。
- 初始状态必须是
max-height: 0+overflow: hidden，否则收起后仍占布局空间 - 展开目标值不能是
none或auto（它们不可插值），得是具体数值，如max-height: 500px - 值怎么选：粗略估算 =
line-height × 最大行数 + padding × 2 + border × 2；例如行高 24px、最多 10 行、上下 padding 各 12px → 24×10 + 24 = 264px，取整到300px更稳妥 - 别设太大（如
9999px）：内容实际高 80px 却按 9999px 做 0.3s 动画，前 0.02s 几乎不动，后面“突然到位”，观感卡顿
更灵活的替代方案：transform: scaleY() 和 clip-path
当内容高度完全不可控（比如图片异步加载、富文本动态插入、服务端渲染后 JS 才接管），预估 max-height 就容易失效。这时推荐视觉裁剪类方案：
-
transform: scaleY(0)→transform: scaleY(1)：需配transform-origin: top，否则缩放中心默认在中间，内容会“往下掉” -
clip-path: inset(0 0 100% 0)→clip-path: inset(0)：从底部遮盖到完全显示，不依赖尺寸，Chrome 55+/Firefox 54+/Safari 15.4+ 支持 - 注意：两者都需搭配
overflow: hidden和opacity过渡，否则边缘或透明度会突变
真正难的不是选哪个方案，而是判断内容高度是否“可预期”——如果含未设宽高的图片、用户可编辑文本、或异步插入的 DOM 节点，max-height 的静态估值就大概率不准，这时候硬套反而比不用动画还糟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
