CSS网格布局与CSS动画_给网格轨道尺寸变化添加过渡

grid-template-rows/columns 不可动画化，需用 max-height、transform 或子元素尺寸过渡模拟；fr 单位无法直接过渡，应通过控制子项属性间接实现视觉变化。

grid-template-rows/columns 变化本身不会触发 transition

直接改 grid-template-rows 或 grid-template-columns 的值（比如从 "100px 1fr" 改成 "50px 1fr"），浏览器不会做过渡动画——css 规范里明确写了，这些属性是「不可动画化」的（not animatable）。

常见错误现象：transition: grid-template-rows 0.3s 写了但完全没反应；用 JavaScript 动态改 style.gridTemplateRows，尺寸跳变，没有缓动。

• 真正能加 transition 的是 grid-row-start/grid-row-end 等轨道定位属性，但它们控制的是**项的位置**，不是轨道尺寸
• 想让轨道“看起来”在缩放，得绕道：用 transform: scaleY() 或 height + overflow: hidden 模拟，或者改子元素尺寸再靠 fr 自适应
• 如果轨道里只有一两个子项，更简单的方式是给那些子项加 transition: height 或 transition: flex-basis（配合 display: flex 容器）

用 max-height 过渡模拟行高收缩/展开

适用于单行轨道内只有一个可伸缩子元素的场景，比如手风琴式面板、折叠菜单栏。原理是把子元素包一层，用 max-height 配合 overflow: hidden 控制显隐，靠它过渡出“轨道变高/变矮”的视觉效果。

使用场景：侧边栏收起、表格行详情展开、响应式导航栏切换。

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

• max-height 必须设为具体数值（如 max-height: 200px），不能用 none 或 fit-content —— 否则过渡失效
• 初始状态建议设 max-height: 0 + opacity: 0 + overflow: hidden，展开时设为足够大的固定值（比如 max-height: 500px），确保有过渡空间
• 注意内容高度动态变化时，硬编码的 max-height 值可能不够或过大，导致滚动条闪现或截断；可结合 js 测量真实高度后写入，但会失去纯 CSS 方案的简洁性

/* 示例：一个网格项内嵌的可展开区域 */ .expander {   max-height: 0;   overflow: hidden;   transition: max-height 0.25s ease, opacity 0.25s ease;   opacity: 0; } .expander.active {   max-height: 300px; /* 需覆盖最大可能内容高度 */   opacity: 1; }

用 transform 缩放整个网格项来“假装”轨道在变

当网格轨道尺寸变化本质是某个 grid-area 内容区域需要缩放时（比如点击后放大预览区），不如放弃动轨道，直接对那个区域的容器做 transform: scale() 或 scaleY()。它性能好、兼容性稳，且天然支持 transition。

性能影响：transform 触发合成层，比改布局属性（如 height）更轻量；但若缩放目标含大量文本或图片，仍需留意重绘开销。

• 别对 grid 容器本身做 transform，否则整个网格变形，子项位置错乱
• 优先缩放 grid-item 内部的 wrapper 元素，保持网格结构稳定
• 配合 transform-origin 控制缩放锚点，比如 transform-origin: top left 让它从左上角展开，更符合“轨道拉伸”直觉

fr 单位无法直接过渡，但可以用间接方式“诱导”渐变

1fr 是计算值，不是长度，所以 grid-template-columns: 200px 1fr → 200px 2fr 这种改法不会过渡。但你可以让 fr 起作用的子项自己动起来，从而“带动”轨道视觉变化。

典型做法：给某列里的子项设 flex: 1 或 width: 100%，再给它加 transition: width 或 transition: flex-basis；或者用 clip-path 配合 transition 做裁剪动画，制造轨道收缩感。

• 如果该列里只有单个子元素，且你控制它的 width 或 flex-basis，那么网格会根据剩余空间重新分配 fr，视觉上就像轨道在流动
• 注意 flex-basis 过渡需配合 display: flex，不能直接在 grid item 上生效；得把它变成 flex 容器的子元素
• clip-path: inset(0) → clip-path: inset(20px) 这类过渡，也能模拟轨道“收窄”，适合做遮罩式动效，但语义弱、可访问性差，慎用

实际项目里最稳的路径往往是：别硬刚 grid-template-*，转而控制内容容器的高度、缩放或裁剪。浏览器对这些属性的过渡支持成熟，也更容易预测行为。真正卡住的点，常在于忘了 max-height 必须是固定值，或误以为 fr 本身可被 tween。