不支持。css transition 无法对 height: auto 做平滑过渡，因 auto 非可插值数值；常用替代方案包括 max-height 过渡（需预估值）、grid-template-rows: 0fr→1fr（现代浏览器支持）及 js 测高（最精准但复杂）。
transition 无法对 height: auto 做平滑过渡，这不是写法问题，而是浏览器渲染引擎的底层限制——auto 不是可插值的数值，transition 只能作用于明确的像素、em、rem 等具体单位。
为什么 height: 0 → height: auto 会瞬间跳变
你看到的“没动画”，其实是浏览器根本没尝试插值：DevTools 里能看到 height 在 0 和 auto 之间硬切，中间帧全为空。原因很直接：auto 是布局阶段才计算出的实际像素值（比如 42px），但 transition 引擎在样式计算阶段就需知道起止数值，它拿不到这个“42”，更没法生成 0→10→22→33→42 这样的中间状态。
max-height 过渡是最常用且兼容性最好的替代方案
它绕开了 height 的限制，用一个足够大的固定值模拟 auto：
- 收起态：
max-height: 0+overflow: hidden - 展开态：
max-height: 500px（不能写none，否则过渡失效） - 必须配
transition: max-height 0.3s ease-in-out -
max-height值要预估：设太小会裁剪内容；设太大（如 2000px）会导致动画后半段“空跑”，视觉拖尾 - 字体缩放、行高变化会影响实际高度，测试时得覆盖不同
font-size场景
grid-template-rows: 0fr → 1fr 是语义级更干净的方案
现代浏览器（Chrome 66+、Firefox 70+、Safari 16.4+）原生支持该插值，无需预估高度：
- 父容器必须是
display: grid，且只有一行承载内容 - 初始态：
grid-template-rows: 0fr（不是0px，0fr表示分配零份额但保留 track） - 展开态：
grid-template-rows: 1fr，Grid 自动按内容撑开 - 必须加
overflow: hidden，否则未展开时内容可能溢出 - 内部有
position: absolute元素时，它们不参与1fr高度计算，可能导致视觉错位 -
transition时间别设太短（如0.1s），Safari 下易跳帧；推荐0.25s–0.35s
JS 测高是唯一真正适配动态内容的方案
当内容高度完全不可预估（如富文本编辑器、用户评论流），max-height 和 grid 都会妥协，这时必须 JS 出手：
- 先设
height: 0+overflow: hidden - 用
element.scrollHeight读真实渲染高度（注意：元素必须已挂载、display不为none、字体已加载） - 用
requestAnimationFrame触发重排，再把height设为具体像素值 - 动画结束后可清掉内联
height，回归height: auto以适应后续内容变动 - 最容易漏的是读取时机——DOM 挂载完成 ≠ CSS 生效完成 ≠ 字体就绪，三者缺一都会导致
scrollHeight读小或为 0
max-height 足够用；如果需要精确、无裁剪、且兼容旧 Safari，JS 测高仍是兜底选择；而 grid-template-rows 看似优雅，但对结构和内部定位有隐性约束，上线前得实测各种边界场景。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
