浏览器不支持对 grid-template-rows 的 CSS 过渡，仅 0fr→1fr 在满足确定高度上下文、显式声明、overflow: hidden 时可行；JS 直接修改 style 会跳变，推荐用 class 切换或 max-height + overflow:hidden 替代。
grid-template-rows 直接加 transition 会静默失效
浏览器明确不支持对 grid-template-rows 做 CSS 过渡——无论你写 transition: grid-template-rows 0.3s 还是套 @keyframes，它都会跳变，控制台无报错、无警告。根本原因是 fr、minmax()、auto 都不是可插值单位，浏览器无法计算中间帧。
唯一原生可行的方案：0fr → 1fr（且必须满足三前提）
只有 grid-template-rows: 0fr → grid-template-rows: 1fr 这种写法能触发平滑过渡，但需同时满足：
- 父容器有**确定的高度上下文**：不能是纯
height: auto，得靠height、max-height、或被 flex 容器约束（如flex: 1） -
grid-template-rows必须**显式声明**，不能依赖grid-auto-rows - 内容区必须设
overflow: hidden，否则 0fr 状态下仍可能漏出内容
示例：
.container {
display: grid;
height: 400px; /* 关键：提供高度上下文 */
grid-template-rows: 0fr;
overflow: hidden;
}
.container.expanded {
grid-template-rows: 1fr;
}常见踩坑点：JS 直接改 style.gridTemplateRows 不会动画
用 JavaScript 手动设置 element.style.gridTemplateRows = '1fr' 会绕过 CSS 动画上下文，导致跳变。必须靠 class 切换触发：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
element.classList.add('expanded') - ❌ 错误：
element.style.gridTemplateRows = '1fr'
另外，子项若设了 height 或 min-height，会干扰轨道收缩，0fr 状态下可能撑高容器。
替代方案：max-height + overflow:hidden（更通用）
当无法保证容器高度上下文时，max-height 是更稳妥的选择：
-
max-height必须设为一个**固定且足够大**的值（如500px或30em），不能用auto - 必须始终搭配
overflow: hidden，否则内容溢出、遮挡其他元素 - 建议加
opacity: 0避免文字在收起过程中“向上挤出”抖动
示例：
.panel {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.25s ease, opacity 0.25s ease;
}
.panel.is-open {
max-height: 500px;
opacity: 1;
}真正容易被忽略的是：0fr 不等于视觉上“高度为 0”，它只是轨道不参与空间分配；最终是否隐藏内容，完全取决于 overflow: hidden 和容器是否有高度约束。
