grid-template-rows 无法用 transition 动画是规范限制，因 fr、minmax()、auto 不可插值；推荐用 max-height + overflow:hidden 实现平滑折叠，或像素值 grid-template-rows 用于固定高度场景，复杂结构变更宜用 animate-css-grid 库。
grid-template-rows 不能加 transition，这不是 bug 是规范限制
直接写 transition: grid-template-rows 0.3s 不会报错，但 Chrome、Firefox、Safari 都会静默忽略——因为 fr、minmax()、auto 都不是可插值单位，浏览器根本算不出中间帧。哪怕你写成 0fr → 1fr 或 0px → auto，结果也只会跳变或完全不动。
用 max-height + overflow:hidden 是最稳的通用解法
它不依赖 Grid 结构变化，纯 CSS 实现，兼容性好，且无需 JS 控制高度计算：
-
max-height必须设为一个**固定且足够大**的值（比如500px或30em），不能用auto；设小了会截断内容，设太大收起后留白明显 - 必须始终配
overflow: hidden，否则内容溢出、遮挡其他网格项、破坏 Grid 布局流 - 建议加
opacity: 0和visibility: hidden（后者需配合 JS 切换时机）避免文字在高度过渡中“向上挤出”抖动 - transition 要显式声明属性，别用
all：例如transition: max-height 0.25s ease, opacity 0.25s ease
示例：
.grid-item.collapsible {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.25s ease, opacity 0.25s ease;
}
.grid-item.collapsible.is-open {
max-height: 500px;
opacity: 1;
}
如果内容高度可控，用 grid-template-rows 像素值过渡更精准
适用于单行文本、固定行高列表等能预估最大高度的场景（比如每行 1.4em，最多 4 行 → 5.6em）：
- 收起态写
grid-template-rows: 1.4em 0px，展开态改为grid-template-rows: 1.4em 5.6em - 必须给内容区域加
overflow: hidden，否则0px行仍可能漏出内容 - 避免混用
align-content: start等影响轨道高度计算的属性 - IE 完全不支持，仅推荐用于现代浏览器主导的项目
真正要动列宽或网格结构？别硬刚，用 animate-css-grid
当你需要响应式切换 grid-template-columns、增删网格项、或动态调整 gap 时，手写 JS 计算位移+transform 成本高、易错、难维护：
- 只需两行代码：
import { wrapGrid } from 'animate-css-grid'; wrapGrid(document.querySelector('.grid')); - 它监听 DOM 变化，用
transform模拟平滑位移，不影响原始 Grid 定位和可访问性 - 支持
grid-column/grid-row改变、gap渐变、列模板重排等全部常见变更 - 注意：不要在动画过程中同步修改容器尺寸（如 toggle
height: auto），否则快照对比会错帧
最容易被忽略的一点是：Grid 动画从来不是“让某条线慢慢变长”，而是“让内容在视觉上协调移动”。你得先决定是保结构（用 max-height）、控精度（用像素 grid-template-rows），还是交出去（用 animate-css-grid）——选错路径，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
