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 生效，但兼容性和性能差：
立即学习“前端免费学习笔记（深入）”；
