height: auto无法参与transition，因其非数值、不可插值；应改用max-height模拟（需设合理上限值并配合overflow: hidden）、grid-template-rows+fr单位（现代浏览器支持）或opacity/visibility协同优化。
因为 height: auto 不是数值，浏览器无法插值计算中间帧——这不是写法问题，是 CSS 动画引擎的底层限制。
为什么 height: auto 不能参与 transition
CSS 动画只对可量化、可线性插值的值生效。height: auto 是布局阶段动态推导的结果，依赖内容、字体、行高、内边距等实时计算，它没有像素量纲。你写 height: 0 → height: auto，浏览器看到的是 “0 → ?”，不是 “0 → 248px”，所以直接硬切，DevTools 的 Computed 面板里能看到高度在 0px 和 auto 之间瞬间切换。
常见错误现象包括：
- 点击展开按钮，内容“啪”一下弹出，毫无过渡
- 收起有动画，展开却完全没反应（起点是
0，终点是auto） - 加了
!important或反复读取offsetHeight也无效——这不解决底层限制
用 max-height 模拟时，值怎么设才靠谱
关键不是“越大越好”，而是“足够但不过量”。过大的 max-height 会导致动画时间拉长、视觉延迟明显；过小则会截断内容。
立即学习“前端免费学习笔记（深入）”；
-
max-height: 1000px：适合内容高度相对固定的场景（如固定条目数的下拉菜单） -
max-height: 100vh：响应式友好，但 Safari 移动端中vh会随地址栏显示/隐藏波动，可能造成动画抖动 -
max-height: calc(100vh - 80px)：更稳妥，预留顶部导航等固定区域空间 - 绝对要避免
max-height: none或max-height: fit-content——它们不可插值，动画彻底失效
只靠 max-height 过渡，为什么收起时还“突兀”
单靠 max-height 会导致收起末尾边缘“咔”一下消失，或点击穿透（内容已不可见，但事件仍可触发）。真正平滑必须三者联动：
-
max-height：负责高度过渡（从0到上限值） -
opacity：负责淡入淡出（从0到1），避免视觉闪跳 -
visibility：负责点击穿透控制（hidden → visible），它不参与transition，但必须和类切换同步生效
同时别忘了父容器加 overflow: hidden，否则高度过渡过程中内容可能溢出。
grid-template-rows + fr 单位能替代 JS 吗
可以，但有兼容性门槛。方案是：
.accordion {
display: grid;
grid-template-rows: auto 0fr;
transition: grid-template-rows 0.3s ease;
}
.accordion.open {
grid-template-rows: auto 1fr;
}0fr 是合法值，表示该行不占空间（不是 0px，所以内容不会被截断），浏览器能对 fr 系数做线性插值。但它要求：
- Chrome 89+、Firefox 75+、Safari 14.1+ 才稳定支持
- IE 完全不支持，Edge ≤18 也不支持
- 不能用于
display: inline-grid或内联元素 - 必须配合
overflow: hidden在父容器上，否则内容可能溢出
实际项目中，如果需要支持旧版 Edge 或 iOS 13 以下，max-height 仍是更稳妥的选择。
