CSS Grid fr单位在动画过渡中为何不自然

先说几个核心判断：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 较劲，只会反复陷入重排的陷阱里。