为什么CSS Grid的fr单位在动画过渡中表现不自然

作者：袖梨 2026-07-14

grid-template-rows 不可动画，因其为非可插值属性；应改用 max-height 或 transform 实现平滑过渡。

grid-template-rows 里用 0fr → 1fr 做过渡，根本不是“不自然”，而是根本不动画——浏览器直接跳变，没中间帧。

`grid-template-rows` 本身不可动画

W3C 明确标注 grid-template-rows 和 grid-template-columns 是 not animatable 属性。
哪怕你写了 transition: grid-template-rows 0.3s，浏览器也只会忽略过渡，执行完立刻重排布局。

常见错误现象：
- 控制台无报错，但尺寸“啪”一下切换
- JS 改 element.style.gridTemplateRows 没缓动
- 看似有动画，其实是父容器 overflow: hidden + 内容高度小造成的视觉欺骗
为什么 fr 单位无法插值：
- fr 不是像素，是“剩余空间的弹性份额”
- 它的实际像素值依赖父容器宽高、字体大小、滚动条是否存在、甚至其它轨道的尺寸
- 浏览器没法算出第 10 帧该是多少像素——没有确定的插值路径

`max-height` 过渡比 `fr` 更可靠

真正能平滑过渡的是数值型、可插值的属性，比如 max-height、transform、opacity。

立即学习“前端免费学习笔记（深入）”；

使用 max-height 的关键约束：
- 初始值必须是具体数值（如 max-height: 0），不能用 none 或 fit-content
- 目标值要覆盖内容最大可能高度（如 max-height: 400px）
- 必须搭配 overflow: hidden，否则溢出会破坏动画效果
- 若高度不确定，需 JS 先调 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 或伪元素补足。