直接对 height: auto 做 transition 会失效，因为 auto 不是可插值的数值；改用 grid-template-rows: 0fr → 1fr 配合 transition 和 overflow: hidden 可实现平滑高度动画。
为什么直接对 height: auto 做 transition 会失效
因为 transition 只能作用于可计算的数值型属性，而 auto 不是具体像素值，浏览器无法插值。设 height: 0; transition: height 0.3s; 再改成 height: auto，实际效果是“瞬间展开”，没有过渡。
用 grid-template-rows + fr 单位模拟高度动画
Grid 的 fr 单位本质是弹性分配剩余空间，配合 grid-template-rows 的显式声明，可以绕过 height 的限制，让容器“看起来”在伸缩。关键在于：把要动画的内容放在一个 grid 子项中，并控制该行的尺寸。
实操要点：
- 父容器设为
display: grid，且只定义一行：grid-template-rows: 0fr; - 子元素（内容区）设
grid-row: 1;，确保它占这一行 - 触发展开时，把
grid-template-rows改成1fr，并加transition: grid-template-rows 0.3s ease; - 注意：必须配合
overflow: hidden防止内容溢出破坏动画感
示例片段：
.accordion {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
overflow: hidden;
}
.accordion.active {
grid-template-rows: 1fr;
}
.accordion > * {
grid-row: 1;
}
fr 动画的兼容性与边界条件
fr 过渡在现代浏览器（Chrome 66+、Firefox 63+、Safari 14+）中稳定支持，但 Safari 早期版本（0fr → 1fr 的插值有卡顿或跳变，建议加 will-change: grid-template-rows; 提前提示渲染引擎。
容易踩的坑：
- 内容高度变化时（比如文字换行、图片加载完成），
1fr行高会自动适应，但不会重新触发动画 —— 这是预期行为，不是 bug - 如果内容本身有固定高度（如设了
height: 200px），1fr会被压制，需移除该限制 - 不能和
min-height/max-height混用做“兜底”，它们会干扰 fr 的计算逻辑
比 max-height 方案更可靠的地方
很多人用 max-height: 0; → max-height: 500px; 模拟，但必须预估最大高度，一旦内容超限就截断或撑破。而 fr 是真正响应内容尺寸的 —— 它不依赖任何 magic number。
不过要注意：这个方案要求父容器有明确的块级上下文（比如有 width 或处于文档流中），如果父容器被 position: absolute 或 display: contents 干扰，grid 行高可能无法正确解析。
真正复杂的是嵌套 grid 场景：外层已用 grid 布局，再在里面套一层 0fr/1fr，需要确认层级是否被 grid-template-areas 或隐式轨道覆盖 —— 这时候得用 subgrid（目前仅 Firefox 支持）或者退回到 JS 测高 + CSS 变量驱动的方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
