应使用 order 属性配合 flex 布局实现平滑拖拽排序动画，因其支持 transition、语义正确且 DOM 顺序与视觉一致；避免用 transform 或 top/left，因会导致掉帧、占位异常及无障碍问题。
拖拽时列表项位置突变，transition 不生效？
直接对 transform 或 top/left 做过渡，拖拽中频繁修改会导致浏览器跳过 transition，因为元素实际坐标在 JS 拖拽逻辑里是靠绝对定位或实时计算的，CSS 并不知道“它该从哪来、到哪去”。真正起效的方式是：不靠 JS 改位置，而是让 CSS 知道“目标位置”，再用 transition 平滑过渡。核心思路是——只改 order，配合 flex 布局。
用 order + display: flex 触发可过渡的重排
order 属性本身支持 transition（虽然 MDN 写“部分浏览器不支持”，但 Chrome/Firefox/Safari 最新稳定版均已支持），且它是 layout-aware 的，改变后会触发 flex 项目的自然重排，此时加 transition: order 0.2s ease 就能看见平滑位移。
关键实操点：
- 父容器必须设为
display: flex，且子项不能用position: absolute破坏文档流 - 每个列表项需有唯一、可更新的
order值（比如初始按索引设order: 0、order: 1…） - 拖拽结束时，不是移动 DOM 节点，而是批量更新所有项的
order值（包括被拖项和受影响项） - 避免在拖拽过程中实时改
order，否则动画会卡顿；只在drop或dragend时一次性更新
.list {
display: flex;
flex-direction: column;
}
.list-item {
transition: order 0.25s cubic-bezier(0.2, 0.8, 0.4, 1);
order: 0; /* 初始值由 JS 控制 */
}为什么不用 transform: translateY 做过渡？
看似简单，但问题集中：
立即学习“前端免费学习笔记（深入）”；
- 拖拽中若持续写
transform，浏览器会强制同步布局，阻塞主线程，动画掉帧 - 松手后要“归位”，得再补一段反向
transform动画，逻辑复杂且易和用户手势冲突 - 若列表高度不固定（如含展开内容），
translateY无法自动处理其他项的占位，视觉上会重叠或留白 - 无障碍支持差：屏幕阅读器仍按 DOM 顺序读，而视觉顺序已靠
transform错乱
相比之下，order 是语义化排序，DOM 顺序与视觉顺序一致，动画由浏览器原生调度，更轻量也更可靠。
兼容性与 fallback 注意点
IE 完全不支持 order transition，Safari 14.1+ 才稳定支持。生产环境需兜底：
- 检测
CSS.supports('transition', 'order 0.1s')，不支持时降级为无动画的 DOM 插入（insertBefore） - 避免对
order做小数或负数操作（某些旧版 Safari 对非整数order渲染异常） - 若列表项有
margin-bottom，动画期间可能出现“抖动”，建议统一用gap替代（flex-gap已广泛支持） - React/Vue 中更新
order时，确保 key 不变，否则框架可能销毁重建节点，中断动画
真正难的不是写出动画，而是让排序逻辑和视觉过渡在各种边界场景下（快速连续拖拽、跨区域投放、键盘辅助操作）都保持一致。这时候，order 的语义稳定性比任何炫技式的 transform 都管用。
