height: 0 → height: auto 的 transition 不生效，因 auto 是布局时解析的逻辑值，浏览器无法对其插值；可用 max-height 模拟、grid-template-rows 或 interpolate-size（chrome 129+）替代，但各有兼容性与适用限制。
不能直接用 height: 0 → height: auto 做 transition，浏览器根本不支持对 auto 插值——这不是你写错了，是 CSS 规范本身限制。
为什么 height: 0 → height: auto 的 transition 不生效
transition 只能作用于可线性计算的数值单位（比如 px、em、vh），而 auto 是布局阶段才解析的逻辑值，不是具体像素。浏览器无法从 0 推出“展开后到底是多少 px”，更没法生成中间帧。结果就是：点击后内容“啪”一下弹出来，毫无过渡。
常见错误写法：
.box {
height: 0;
transition: height .3s;
}
.box.open {
height: auto;
}
这段代码在所有浏览器里都无效。
用 max-height 模拟过渡（最兼容方案）
这是目前支持度最高、无需 JS、纯 CSS 可行的方案，适用于大多数折叠/展开场景（如 accordion、下拉菜单）。
-
max-height支持 transition，且0→ 大数值（如500px）可插值 - 必须配
overflow: hidden，否则内容会溢出 - 终值要足够大：设太小（比如
max-height: 200px）而内容实际高 300px，动画会在 200px 处戛然而止；设太大（如1000px）会导致收起时有明显延迟 - 初始状态用
max-height: 0，展开状态用max-height: 500px（根据内容预估）
示例：
.box {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease-in-out;
}
.box.open {
max-height: 500px; /* 根据内容高度合理预估 */
}
用 grid-template-rows 实现伪 auto 过渡（Chrome 129+ 可靠，Safari/Firefox 仍不支持）
避开 height，改用 Grid 的 fr 单位做比例插值，视觉上更接近“真实 auto”效果。
- 容器必须设
display: grid，且只有一行承载内容：grid-template-rows: 0fr→1fr -
0fr不等于0px，它保留轨道但不分配空间，不会破坏文档流 - 必须加
overflow: hidden，否则滚动条或内容可能外露 - 父容器不能是
flex或grid容器（会打断继承），建议就近包裹一层div
示例：
.grid-container {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows .3s ease;
}
.grid-container.open {
grid-template-rows: 1fr;
}
interpolate-size: allow-keywords 在 Chrome 129+ 中的使用陷阱
这个新属性确实能让 height: 0 → height: auto 动起来，但极易误用，目前仅 Chrome 129+ 支持，Safari 和 Firefox 截至 2026 年 6 月仍完全不识别。
-
interpolate-size必须写在父容器上，不是目标元素本身——它是继承性属性，影响子元素尺寸计算 - 目标元素仍需显式声明
height: 0和height: auto，且transition必须明确写height，不能用all - 必须保留
height: auto作为兜底：老浏览器忽略该属性，只认这个 - 若父级是
flex或grid容器，继承链可能中断，建议额外套一层普通div并设该属性
正确结构：
.parent {
interpolate-size: allow-keywords;
}
.box {
height: 0;
overflow: hidden;
transition: height .3s ease;
}
.box.expanded {
height: auto;
}
真正麻烦的地方不在写法，而在判断：你要展开的内容高度是否稳定？是否允许 fallback 到 max-height 的“估算误差”？如果内容动态加载、高度不可预知，又要求 Safari/Firefox 下也平滑，那 JS 测 scrollHeight + 设置具体 height 仍是唯一可靠路径——CSS 方案本质都是妥协。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
