先说几个核心判断：grid-template-rows 里用 0fr → 1fr 做过渡，说它“不够流畅”都算客气了——实际上，它根本不会产生任何中间动画帧。浏览器直接瞬间切换，没有任何平滑效果，就是这么干脆。
用 grid-template-rows 做动画，本身就是一个常见的误区。因为它从根本上就不是一个可动画的属性。
grid-template-rows 本身不可动画
W3C的规范里写得明明白白，grid-template-rows 和 grid-template-columns 都是 not animatable（不可动画）。哪怕你写了 transition: grid-template-rows 0.3s，浏览器也只会直接忽略，执行完属性变更后立刻重新布局，不会有任何过渡效果。
不少开发者都遇到过类似的情况：
- 控制台没有报错，但尺寸是“啪”一下切换的；
- 用Ja vaScript改了
element.style.gridTemplateRows，也看不到缓动效果； - 有时候看着像是有动画，其实是父容器设置了
overflow: hidden，加上内容高度本来就很有限，造成的视觉错觉。
为什么 fr 单位没法插值？因为 fr 不是像素值，它是个“弹性份额”，代表的是剩余空间的分配比例。它的实际像素值，取决于父容器宽高、字体大小、滚动条是否存在，甚至其他轨道的尺寸。浏览器在动画的每一帧里，都无法确定当前 fr 值该对应多少像素——没有确定的路径，自然没法进行插值计算。
max-height 过渡比 fr 更可靠
真正能实现平滑过渡的，是数值型、可插值的属性，比如 max-height、transform、opacity 这些。
用 max-height 做过渡，有几个关键约束需要注意：
- 初始值必须是具体数值，比如
max-height: 0，不能用none或fit-content； - 目标值要能覆盖内容的最大可能高度，比如
max-height: 400px； - 必须搭配
overflow: hidden，否则内容溢出会破坏动画效果； - 如果高度不确定，那就得用Ja vaScript先调用
getBoundingClientRect().height再写入，但这样会失去纯CSS的简洁性。
来看一个典型的示例结构：
.accordion-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease, opacity 0.25s ease;
}
.accordion-panel.is-open {
max-height: 400px;
opacity: 1;
}
transform: scaleY() 是更稳的替代方案
对单个网格项做缩放，比直接改动整个轨道要轻量得多，也更可控。而且，所有现代浏览器都完美支持 transition: transform。
实际应用时，有几个要点：
- 给子元素设置一个固定
height或min-height，然后用transform: scaleY()来控制显隐； - 初始状态：
transform: scaleY(0)+transform-origin: top； - 展开目标：
transform: scaleY(1)； - 为了避免
scaleY(0)完全隐藏时触发文字重排，可以同步加上opacity: 0来控制。
不过它有一个小问题：它不改变文档流，所以热区和点击区域仍然按原始尺寸来响应。必要时，需要配合 pointer-events: none 或者用伪元素来补足。
说到底，fr 单位天生就不适合做动画。这不是bug，而是它在设计上的局限。想让CSS Grid区域“动起来”，就得把动画的压力从轨道定义转移到子元素自身——要么靠 max-height 模拟高度变化，要么靠 transform 做视觉缩放。硬着头皮跟 grid-template-rows 较劲，只会反复陷入重排的陷阱里。
