为什么CSS Grid的fr单位在动画过渡中表现不自然？-css教程-PHP中文网

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

为什么css grid的fr单位在动画过渡中表现不自然？

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 的关键约束：

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载
- 初始值必须是具体数值（如 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 或伪元素补足。