transition 无法直接监听 grid-template-columns 变化
CSS 的 transition 对 grid-template-columns 这类“离散值”属性基本无效——浏览器不把它当作可插值的属性，哪怕你写了 transition: grid-template-columns 0.3s ease，宽度变化仍是突兀跳变。
根本原因是：轨道定义（比如 "200px 1fr" 和 "80px 1fr"）不是数值型，中间没有线性过渡路径；浏览器不知道怎么“算出 50% 状态”。
- 常见错误现象：
grid-template-columns改变时完全无动画，控制台也无报错，让人误以为是写法或时机问题 - 适用场景：侧边栏收合/展开、响应式断点切换、用户拖拽调整宽度
- 真正能被
transition平滑驱动的，只有数值型 CSS 属性，比如width、transform、opacity
用 width + transform 模拟侧边栏缩放更可靠
把侧边栏设为固定容器（如 aside），用 width 控制显隐宽度，再配合 overflow: hidden 防内容溢出，就能获得稳定过渡效果。
关键在于避免依赖 Grid 轨道本身做动画，转而用传统布局属性承载动效逻辑：
立即学习“前端免费学习笔记（深入）”；
- 给侧边栏加
transition: width 0.3s ease, opacity 0.3s ease，同时用opacity配合隐藏提升视觉连贯性 - 收起时设
width: 0; opacity: 0; pointer-events: none，比单纯display: none更利于过渡衔接 - 若需保持 Grid 布局结构不变，可让主内容区用
grid-column: 2 / -1占满剩余空间，不受侧边栏width影响
示例片段：
aside {
width: 240px;
transition: width 0.3s ease, opacity 0.3s ease;
}
aside.collapsed {
width: 0;
opacity: 0;
pointer-events: none;
}
想保留 grid 布局又想要平滑？用视差式伪动画
如果必须用 grid-template-columns 定义整体布局（比如主内容要随侧边栏缩放自动伸缩），又不想放弃动画感，可以绕开 CSS 过渡，用 JS 监听状态变化，手动触发 class 切换 + transform: scaleX() 做视觉补偿。
这不是真正“监听轨道变化”，而是用 class 控制一个覆盖层的缩放动画，欺骗眼睛认为是 Grid 在动：
- 给侧边栏外层加
position: relative，内部内容用transform: scaleX(1)→scaleX(0)模拟收缩 - 主内容区保持
grid-column: 2 / -1，不受影响，视觉上形成“侧边栏被压扁”的平滑错觉 - 注意：
scaleX(0)会让子元素不可点击，需配合pointer-events: none或临时移除 - 兼容性好，所有现代浏览器都支持
transform过渡，且性能远高于重排 Grid 轨道
媒体查询中改 grid-template-columns 怎么加动画
纯 CSS 媒体查询（@media）触发的 grid-template-columns 变更，同样无法被 transition 捕获。但你可以把断点逻辑“上提”到 class 层级，用 JS 控制 class 切换时机，从而接入过渡。
- 不要写
@media (max-width: 768px) { .layout { grid-template-columns: 1fr; } }—— 这个切换永远无动画 - 改用
.layout.is-mobile { grid-template-columns: 1fr; }，再用 JS 监听resize或matchMedia，在合适时机添加 class - 添加 class 后，靠
transition驱动的是其他可动画属性（如width、transform），而非 Grid 轨道本身 - 性能提示：避免在
resize中频繁操作 DOM，用requestAnimationFrame节流
真正难的从来不是“怎么写动画”，而是判断哪个属性该动、哪个该静——Grid 是布局骨架，别让它承担动效职责。
