order不可动画因其不在CSS可动画属性列表中，浏览器不监听也不插值；应改用grid-column/grid-row等可插值属性配合transform或FLIP模式实现平滑过渡。
transition 直接改 order 为什么没反应
因为 order 不在 CSS 可动画属性列表中——浏览器压根不监听它的变化，更不会插值。你看到的“跳变”不是过渡失败，是根本没启动动画引擎。DevTools 的 Computed 面板里搜 transition，会发现它压根没生效；哪怕写了 transition: order 0.3s，也会被静默忽略。
用 grid-column + grid-row 替代 order 实现真平滑移动
Grid 的 grid-column-start/grid-row-end 等位置属性是可插值的，只要写法规范，就能触发真实过渡：
- 必须用
/分隔的整数起止值，比如grid-column: 1 / 2→grid-column: 3 / 4；只写grid-column: 1会 fallback 到 auto 结束线，不可插值 - 不能含
auto、span auto或命名线（如"sidebar"），否则动画中断，退化为跳变 - Firefox 直到 v115 才稳定支持
grid-row过渡，Chrome/Safari 更早，线上项目需检查兼容性 - 配合
transform: translate()补位移轨迹，视觉更自然——Grid 控制逻辑位置，transform 控制渲染层偏移
FLIP 思想怎么和 Grid 过渡配合落地
FLIP（First, Last, Invert, Play）不是魔法，而是把“重排驱动动画”转成“重绘驱动动画”的工程技巧。用在 Grid 排序上，核心是绕开 grid-template-areas 或 grid-template-columns 这类不可动画的结构定义：
- First：用
getBoundingClientRect()记录排序前每个项的物理位置 - Last：立即应用新 Grid 位置（如改
grid-column），此时元素已跳到新格子，但视觉还没动 - Invert：用
transform: translate()把每个项反向位移回原位置（靠 JS 计算差值） - Play：移除
transform，让 transition 驱动它滑向新格子
这比纯 CSS 方案多两行 JS，但能保证任意排序都平滑，且不依赖 Chrome 的 @property 实验特性。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的坑：transition 规则必须常驻基础类
如果把 transition 写在状态类里（比如 .sorted { grid-column: 2 / 3; transition: grid-column 0.3s; }），一删这个类，过渡就消失——浏览器立刻重算样式，没有插值上下文。正确做法是：
- 给所有要动的项加一个永不删除的基础类，比如
.grid-item - 把
transition: grid-column 0.3s, grid-row 0.3s写死在这个类里 - 只通过切换其他类（如
.pos-1、.pos-2）来改位置值
否则第一次点击或 class 切换时，大概率闪一下再动，或者干脆不动——这不是 bug，是 transition 生命周期被意外掐断了。
