grid 布局中多数结构属性（如 grid-template-columns）不支持 transition，因其不可插值；仅 0fr→1fr、transform、order（配合 flip）等少数方式可实现平滑动画。
transition 在 Grid 布局中“跳变”，不是你写错了，而是浏览器压根没启动动画引擎——它对多数 Grid 结构属性静默忽略，只对极少数可插值的定位属性真正响应。
为什么 grid-template-columns 加了 transition 还是突变？
因为 grid-template-columns 是结构化轨道定义（如 "1fr 2fr auto"），不是数值型属性，浏览器无法在线性帧之间插值。哪怕你写了 transition: grid-template-columns 0.3s，DevTools 的 Computed 面板里也看不到过渡生效，Performance 面板会显示大量 Layout 占比飙升。
- 同理失效的还有：
grid-template-rows、grid-template-areas、grid-auto-flow -
grid-column和grid-row理论上可动，但极其脆弱：起止值必须是整数对，比如grid-column: 1 / 3 → 2 / 4；含auto、span 2或命名线（如"sidebar"）就立即 fallback 到跳变 - Firefox 直到 v115 才稳定支持
grid-row动画，旧版本直接无视
用 0fr → 1fr 实现行高平滑展开
这是目前兼容性最好、无需 JS 的原生方案，专治 height: auto 过渡失效和折叠面板抖动。
- 把要控制显隐的内容放在独立的
grid-row中，用grid-template-rows控制该行比例 - 初始设为
0fr（不是0px，内容不渲染但 DOM 保留），展开时设为1fr，浏览器能线性插值 0→1 - 父容器必须加
overflow: hidden，否则内容可能溢出 - 示例：
.accordion {
display: grid;
grid-template-rows: auto 0fr;
transition: grid-template-rows 0.3s ease;
overflow: hidden;
}
.accordion.open {
grid-template-rows: auto 1fr;
}
- 兼容性：Chrome 89+、Firefox 75+、Safari 14.1+；IE 和 Edge ≤18 不支持
用 transform 替代位置变更，绕开重排
真正稳的动画路径不是“让 Grid 重算位置”，而是让元素在已有格子内视觉位移——transform 只走合成层，不触发 Layout，GPU 加速，且兼容性拉满。
- 给网格项设
position: relative，再用transform: translateX()或translateY()模拟跨格移动 - 务必把
transition: transform 0.3s写死在基础类里（如.grid-item），别只写在状态类中，否则第一次切换会闪一下 - 配合
will-change: transform或transform: translateZ(0)提前提示浏览器创建合成层（仅对高频动画项启用） - 若需保持 DOM 顺序（如拖拽排序），可用
order+transition: order，但注意：它本身不可动画——得靠 JS FLIP 模式补足：先记录原位置 → 立即改order→ 用transform反向位移回原点 → 移除transform启动过渡
响应式断点切换时动画卡顿怎么破？
媒体查询触发同步 Layout，而 JS 如果立刻加动画 class，就会撞上重排未完成的主线程，结果就是“啪”一声跳到位。
- 监听
resize时，必须包一层requestAnimationFrame，确保样式变更发生在 layout 完成后：
window.addEventListener('resize', () => {
requestAnimationFrame(() => {
element.classList.add('animate');
});
});
- 每个
@media块里都要**完整重声明**transition，不能只靠默认样式继承；比如桌面端写了transition: transform 0.3s，移动端也要显式写transition: transform 0.3s, opacity 0.3s - 用 Chrome DevTools 的 Rendering 面板勾选 Layer borders，确认动画真走 GPU 合成（看到橙色边框包裹）
真正麻烦的从来不是“怎么让元素看起来在动”，而是多个项目在列数变化、排序、响应式缩放时，如何保持相对关系不撕裂、不重叠、不抖动——这时候手动写 transform 很快就难维护了，该上 animate-css-grid 就得上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
