grid-template-columns 不支持 transition，因其为声明式轨道定义而非数值属性，浏览器无法插值；应改用 transform、opacity 等视觉层动画实现平滑效果。
grid-template-columns 不能加 transition，写了也白写——浏览器静默忽略，不报错、不动画、不插值。
为什么grid-template-columns加了transition也没反应？
它不是数值型属性，而是声明式轨道定义。比如从 "240px 1fr" 变成 "80px 1fr"，浏览器无法计算中间状态：240→80 是线性？还是按比例缩放？规范没定义，所有主流浏览器（Chrome/Safari/Firefox）统一不支持。
常见错误现象：
- 写了
transition: grid-template-columns 0.3s，但布局仍是瞬时跳变 - 用 CSS 变量包裹，如
grid-template-columns: var(--cols)，再试图过渡--cols—— 变量本身不可动画，只在布局计算阶段介入，不参与插值 - 尝试
@property注册变量并设syntax: "<length-percentage>"</length-percentage>，仅在极少数单fr场景下 Chrome 120+ 有微弱效果，Firefox/Safari 基本不认
真正能落地的“列宽变化”平滑方案
放弃动轨道本身，改操作视觉层，成本低、兼容好、性能高：
- 给侧边栏容器加
position: relative - 内部内容用
transform: scaleX(1)→scaleX(0.2)模拟收缩（GPU 加速，不触发重排） - 同步切换
pointer-events: none，避免缩到scaleX(0)后仍可点击 - 主内容区保持
grid-column: 2 / -1不变，不受影响 - 若需响应式断点切换（如移动端收起），用
width+overflow: hidden+opacity组合更稳妥，但注意width必须设明确初始值（不能是auto）
什么时候该上animate-css-grid？
当你需要同时响应以下任意组合时，手写 transform 很快失控：
-
grid-template-columns改变（比如从 3 列 → 4 列） -
grid-gap动态调整 - 多个子项的
grid-column或grid-row批量位移
只需两行代码：
import { wrapGrid } from 'animate-css-grid';
wrapGrid(document.querySelector('.grid'));
它监听 DOM 变化，用 transform 逐项计算位移，视觉协调滑动。注意：动画过程中别同步修改容器 height 或 display，否则快照对比错位，动画撕裂。
最容易被忽略的一点：平滑从来不是“让列宽变”，而是“让人的感知不突兀”。缩放、位移、透明度，都是为这个服务的；真要靠 Grid 轨道自己动，目前没有可靠路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
