怎样在现代CSS中为grid-template-rows添加平滑过渡动画？-css教程-PHP中文网

浏览器不支持对 grid-template-rows 的 css 过渡，仅 0fr→1fr 在满足确定高度上下文、显式声明、overflow: hidden 时可行；js 直接修改 style 会跳变，推荐用 class 切换或 max-height + overflow:hidden 替代。

怎样在现代css中为grid-template-rows添加平滑过渡动画？

grid-template-rows 直接加 transition 会静默失效

浏览器明确不支持对 grid-template-rows 做 CSS 过渡——无论你写 transition: grid-template-rows 0.3s 还是套 @keyframes，它都会跳变，控制台无报错、无警告。根本原因是 fr、minmax()、auto 都不是可插值单位，浏览器无法计算中间帧。

唯一原生可行的方案：0fr → 1fr（且必须满足三前提）

只有 grid-template-rows: 0fr → grid-template-rows: 1fr 这种写法能触发平滑过渡，但需同时满足：

父容器有**确定的高度上下文**：不能是纯 height: auto，得靠 height、max-height、或被 flex 容器约束（如 flex: 1）
grid-template-rows 必须**显式声明**，不能依赖 grid-auto-rows
内容区必须设 overflow: hidden，否则 0fr 状态下仍可能漏出内容

示例：

.container {
  display: grid;
  height: 400px; /* 关键：提供高度上下文 */
  grid-template-rows: 0fr;
  overflow: hidden;
}
.container.expanded {
  grid-template-rows: 1fr;
}

常见踩坑点：JS 直接改 style.gridTemplateRows 不会动画

用 JavaScript 手动设置 element.style.gridTemplateRows = '1fr' 会绕过 CSS 动画上下文，导致跳变。必须靠 class 切换触发：

CSS婚礼策划服务机构宣传网站模板

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

下载

✅ 正确：element.classList.add('expanded')
❌ 错误：element.style.gridTemplateRows = '1fr'

另外，子项若设了 height 或 min-height，会干扰轨道收缩，0fr 状态下可能撑高容器。

替代方案：max-height + overflow:hidden（更通用）

当无法保证容器高度上下文时，max-height 是更稳妥的选择：

max-height 必须设为一个**固定且足够大**的值（如 500px 或 30em），不能用 auto
必须始终搭配 overflow: hidden，否则内容溢出、遮挡其他元素
建议加 opacity: 0 避免文字在收起过程中“向上挤出”抖动

示例：

.panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}
.panel.is-open {
  max-height: 500px;
  opacity: 1;
}

真正容易被忽略的是：0fr 不等于视觉上“高度为 0”，它只是轨道不参与空间分配；最终是否隐藏内容，完全取决于 overflow: hidden 和容器是否有高度约束。