grid-template-columns 不支持 transition，布局跳变；grid-column/grid-row 动画需整数起止值，auto/span 不可插值；transform 模拟最稳，配合 css 变量或 animate-css-grid 库可解决复杂重排。
grid-template-columns 不能加 transition 实现平滑重排——浏览器规范明确不支持，写了也静默失效，布局只会瞬间跳变。
为什么 grid-column / grid-row 动画有时会断掉
只有整数起止值才能插值，比如 grid-column: 1 / 3 → grid-column: 2 / 4 是可行的；但一旦出现 auto、span 2 或 grid-area，动画就会 fallback 到瞬时切换。
- 必须显式写成
grid-column: a / b形式，不能只写grid-column: 1 - Firefox 直到 v115 才稳定支持
grid-row动画，旧版本会直接跳变 - 如果元素原本用了
grid-area: sidebar，得先拆成grid-row+grid-column才能动
用 transform 模拟重排是最稳的视觉方案
它不依赖 Grid 定位逻辑，只改渲染层位置，GPU 加速、兼容性好、不会错位。
- 给网格项设
position: relative，再用transform: translate()控制位移 - 配合
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)，比默认 ease 更顺滑 - 若需响应 JS 排序结果，用 CSS 变量定义偏移：
--dx: 0、--dy: 0，再通过calc(var(--dx) * 110px)计算 translate 值 - 记得加
will-change: transform提前提示浏览器优化
复杂重排别硬写 CSS，用 animate-css-grid 库兜底
当你需要同时动 grid-template-columns、gap、多个项目的 grid-column，手写很快失控。
- 只需两行代码：
import { wrapGrid } from 'animate-css-grid'; wrapGrid(document.querySelector('.grid')); - 它自动监听 DOM 变化，用
transform补帧，所有项目位移协调、不跳、不错位 - 注意：不要在动画过程中同步修改容器尺寸（比如 toggle
height: auto），否则快照对比会错帧 - 筛选时避免
display: none，改用opacity: 0; visibility: hidden; pointer-events: none，再配transition: opacity 0.25s
真正麻烦的从来不是“怎么让元素看起来在动”，而是“怎么让多个项目在列数变化时保持相对关系、不撕裂、不重叠”。这类问题，CSS 变量或手动 transform 很快就难维护了——该上库的时候就得上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
