grid-template-rows 本身不支持 transition 动画，因其属离散式布局属性，无法插值计算中间状态；应改用 max-height + overflow 或 clip-path 等可动画属性实现视觉折叠效果。
grid-template-rows 本身不支持过渡动画，直接对它加 transition 没有效果 —— 这是绝大多数人踩坑的第一步。
为什么 grid-template-rows 无法直接过渡
CSS 不会对 grid-template-rows 这类“离散值”做插值计算。比如从 "1fr" 到 "0fr 1fr"，浏览器根本不知道怎么“中间帧”；即使都用 px（如 "200px" → "0px"），只要行定义数量变化（比如从 2 行变 1 行），布局引擎会强制重排，transition 被跳过。
可行方案：用 grid-row-end + 高度过渡替代
核心思路是固定网格结构（比如始终 2 行），靠控制子元素的 grid-row-end 和自身 height/max-height 实现视觉折叠，让过渡落在可动画属性上：
- 父容器设
display: grid; grid-template-rows: auto 1fr;（两行，第二行占剩余空间） - 面板内容区域设
grid-row: 1 / -1;（跨所有行），再用max-height+overflow: hidden控制显隐 - 切换时只改
max-height（配合transition: max-height 0.3s ease） - 避免用
height: 0，因子元素内联高度不可知，优先用max-height: 0+ 足够大的展开值（如max-height: 500px）
更稳妥的写法：结合 clip-path 避免高度估算
如果内容高度动态、难预估，max-height 过渡容易卡顿或露底。此时放弃高度过渡，改用 clip-path：
- 保持
grid-template-rows不变（例如"auto 1fr"） - 面板元素设
clip-path: inset(0 0 100% 0);（完全裁掉） - 展开时改为
clip-path: inset(0);，并加transition: clip-path 0.25s ease - 注意：需要确保父容器有
overflow: visible，否则clip-path裁剪会被截断
真正要动 grid-template-rows 的时候（比如响应式切换布局），它就不是用来做交互动画的——那是媒体查询和 JS 控制的范畴。过渡效果得交给浏览器能线性插值的属性来扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
