grid-template-columns 直接加 transition 无效，因其为非数值型轨道定义，浏览器无法插值；可用 width + overflow + opacity 实现侧边栏缩放，或 grid-column/grid-row（整数起止）实现单项目位移，复杂场景优先用 transform 模拟。
grid-template-columns 直接加 transition 无效
浏览器不支持对 grid-template-columns 做插值动画，无论你写 transition: grid-template-columns 0.3s 还是套 @keyframes，它都会静默忽略——没有报错，也没有动画，只是布局重排。根本原因是轨道定义（比如 "240px 1fr" → "80px 1fr"）不是数值型，中间没有可计算的过渡路径。
用 width + overflow 配合 transition 实现侧边栏类缩放
真正能平滑驱动的，是 width、max-width、opacity 这类数值型属性。侧边栏收合/展开最稳的写法是：
-
width设明确初始值（如240px），不能依赖auto - 收起时设
width: 0+overflow: hidden+opacity: 0+pointer-events: none -
transition必须声明在基础选择器里，比如.sidebar { transition: width 0.3s ease, opacity 0.3s ease; }，而不是只写在@media内 - 避免用
display: none切换，它会中断渲染流，导致过渡直接跳变
grid-column / grid-row 支持有限但可靠的位移动画
如果你要动的是网格内单个元素的位置（比如卡片从左上角移到右下角），grid-column 和 grid-row 是目前唯一原生支持 transition 的 Grid 定位属性，但有硬性限制：
- 必须写成
grid-column: 1 / 2这种整数起止形式，不能含auto或span动态值 - 起止值都得是整数，例如
grid-column: 1 / 3→grid-column: 2 / 4才能插值 - Firefox 对
grid-row动画支持较晚（v115+），Chrome/Safari 更早 - 如果用了
grid-area，得先拆成grid-row+grid-column才能生效
transform 是视觉平滑的兜底方案
当你要模拟整个网格结构“动起来”（比如断点切换时主内容区滑入、侧边栏压扁收缩），transform 是唯一稳定、高性能的选择：
- 用
transform: scaleX(1)→scaleX(0)模拟侧边栏收缩，不触发布局重排 - 配合
opacity和pointer-events: none避免残留点击热区 - 父容器加
will-change: transform可提前提示合成层，但别滥用——可能引发内存泄漏 - 移动端 Safari 对
max-width过渡支持不稳定，此时transform+opacity是更兼容的 fallback
width 动画会强制重排。哪怕样式写对了，滚动中 resize 也会掉帧。所以优先走 transform 路线，除非业务逻辑强依赖 DOM 位置（比如无障碍焦点或 JS 坐标计算）。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
