flex-order 变化本身不会触发 transition，因 order 不在可动画属性列表中；应改用 transform + z-index 模拟顺序切换动画，并配合预设 class 和 step-end 实现视觉过渡。
flex-order 变化本身不会触发 transition
直接改 order 值（比如从 1 改成 3）不会触发动画，因为 order 不是 CSS 动画属性（不在 可动画属性列表中）。你看到的“跳变”，不是过渡失效，而是根本没被监听。
用 transform + z-index 模拟顺序切换动画
真正能 transition 的是 transform、opacity、z-index 等。要实现“视觉上顺序变化+有过渡”，得绕开 order，靠位移和层叠控制表现：
- 给每个 flex 项设固定宽度/高度，用
transform: translateX()或translateY()把它们“推”到目标位置 - 配合
z-index控制谁在前谁在后（尤其当有重叠或交互动画时） - 所有项都设
transition: transform 0.3s ease, z-index 0.3s step-end—— 注意z-index要用step-end避免中间层叠错乱 - 用 JS 切换预设 class，比如
.pos-0、.pos-1，每个 class 内定义对应的transform和z-index
示例片段：
.item { transition: transform 0.3s ease, z-index 0.3s step-end; }
.item:nth-child(1) { transform: translateX(0); z-index: 1; }
.item:nth-child(2) { transform: translateX(100px); z-index: 2; }
.item.reordered:nth-child(1) { transform: translateX(100px); z-index: 2; }
.item.reordered:nth-child(2) { transform: translateX(0); z-index: 1; }
用 JavaScript 手动触发 reflow 强制过渡（不推荐但可行）
极少数场景非要基于 order，可以强制浏览器“重新计算布局”来让 transition 生效，但兼容性和性能差：
立即学习“前端免费学习笔记（深入）”；
- 先改
order值 - 立刻读取一个布局相关属性（如
offsetTop、getBoundingClientRect()），触发同步 reflow - 再加过渡 class 或改其他可动画属性
这种写法容易卡顿，且 Safari 对 order + reflow 的行为不一致，实际项目里基本不用。
更稳妥的替代方案：用 CSS Grid + animate layout shift
如果容器结构允许，Grid 比 Flex 更适合做“位置重排动画”：
- 用
grid-template-areas或grid-row/grid-column控制位置 - 这些属性虽不可直接 transition，但配合
@property（Chrome 115+）或animate()API 可驱动 - 或者退一步：用
position: absolute+inset+transform实现完全可控的位移动画
真正需要“顺序变化过渡”的场景，往往本质是“视觉排序动画”，而不是 DOM 顺序或 flex 排序逻辑本身 —— 把关注点从 order 移开，反而更容易落地。
