height: auto 无法被 transition 插值，因浏览器无法将 auto 解析为具体像素值；须改用 max-height（起始0、终点预估足够大）或 grid 的 grid-template-rows/grid-row 过渡。
height: auto 无法被 transition 插值，浏览器根本不知道“auto”具体是多少像素，所以直接跳变；必须用可计算的、有明确起始和终止值的替代方案。
为什么 height: auto 不能过渡
transition 要求属性值在变化前有确定的数值（如 100px、0），而 height: auto 是一个计算后才得出的布局结果，不是固定值。哪怕你写 transition: height 0.3s，从 auto → 200px 或 200px → auto 都无法生成中间帧。
- DevTools 的 Computed 面板里能看到 height 实际值是
auto，而非像素数，这就是失效信号 - 即使父容器高度固定，子元素
height: auto仍不可插值——因为它的“自动高度”依赖内容流，不是静态尺寸 - 用
min-height或max-height替代时，必须确保起始/终点都是具体数值（比如max-height: 0→max-height: 500px）
用 max-height 过渡实现“展开/收起”效果
这是最常用、兼容性好（IE10+）、无需 JS 的方案，但要注意边界条件：
- 起始值必须是
max-height: 0，且配overflow: hidden，否则内容会撑开容器 - 终点值不能写
max-height: auto（照样无效），得估算一个足够大的安全值，比如max-height: 300px或max-height: 1000px - 如果内容高度波动大，设太小会截断，设太大则动画时间拉长（因需从 0 过渡到 1000px）
- 示例：
.accordion-item { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }<br>.accordion-item.open { max-height: 300px; }
Grid 布局让高度过渡更可靠
当你要过渡的是“占容器比例的高度”（比如从 1fr 到 2fr），Grid 比传统 height 更可控，因为它把高度分配逻辑从子元素转移到容器自身：
- 容器必须有明确高度（如
height: 400px或min-height），否则 grid-template-rows 的fr单位无参照 - 过渡目标应是
grid-row-start/grid-row-end或grid-template-rows，而不是子元素的height - 注意：直接过渡
grid-template-rows在 Safari 旧版中支持弱，推荐用grid-row+transition: grid-row 0.3s - 示例：
.grid-container { display: grid; height: 300px; grid-template-rows: 1fr; }<br>.grid-container.expanded { grid-template-rows: 2fr; transition: grid-template-rows 0.3s; }
容易被忽略的细节
max-height 过渡看似简单，但实际项目里常因三类细节翻车：
- 元素有 padding/margin/border，它们不参与
max-height计算，会导致视觉“抖动”或留白，建议用box-sizing: border-box统一基准 - 文字换行、图片加载完成等异步行为可能在动画中途改变内容高度，导致 max-height 终点值不够用——此时需 JS 动态测算并内联设置
- Grid 方案在嵌套场景下，若父容器高度由内容撑开（
height: auto），整个 grid 高度就失去锚点，fr单位会退化为auto，过渡再次失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
