transition在拖拽排序中“失效”是因为JS频繁直接设置transform值导致过渡被重置；正确做法是统一用transform定位、添加will-change: transform触发硬件加速并保过渡，drop后批量设置目标transform实现平滑归位。
transition 为什么在拖拽排序里经常“失效”
因为 transition 只响应 CSS 属性的「最终值变化」，而拖拽过程中元素位置靠 transform 或 top/left 动态更新，JS 每帧直接改值，浏览器来不及触发过渡动画——看起来就是生硬跳变。
- 常见错误现象：
transition: transform 0.3s写了但拖拽时完全没动画 - 根本原因：JS 频繁设置
element.style.transform = 'translateX(100px)'，每次都是新值，过渡被重置 - 正确思路：让元素「脱离 JS 直接控制位置」，改用 CSS 自身的过渡能力驱动位移
用 transform + will-change 触发硬件加速并保过渡
把拖拽中的元素用 transform 定位，同时提前声明 will-change: transform，既提升渲染性能，又避免浏览器跳过过渡。
- 必须加
will-change: transform（或在拖拽开始时动态加），否则某些浏览器（尤其 Safari）会禁用transform过渡 - 不要混用
top/left和transform：CSS 计算优先级不同，会导致过渡不生效或抖动 - 示例关键代码：
item.style.transform = `translateY(${offset}px)`;<br>item.style.willChange = 'transform';
如何让“排序完成”那一下真正有过渡感
拖拽结束时，目标位置不是立刻跳过去，而是让所有相关元素平滑归位——这需要 JS 计算出每个元素的目标坐标，再用 CSS 过渡驱动。
- 核心动作：在
drop后，遍历所有参与排序的item，批量设置它们的style.transform到目标位置（不是用top/left） - 必须统一用
transform，且确保所有 item 都有transition: transform 0.25s ease（建议写在 class 里，而非内联） - 容易踩的坑：没清空上一次的
transform，导致叠加计算错位；或者用了getBoundingClientRect()后没考虑滚动偏移，位置算偏
React/Vue 场景下 transition-group 不够用怎么办
<transitiongroup></transitiongroup> 或 <transition-group></transition-group> 默认只管「增删」，不管「重排」。拖拽排序是 DOM 顺序没变、视觉位置全变，它压根不触发入场/出场钩子。
立即学习“前端免费学习笔记（深入）”；
- 真实需求：不是列表项新增或删除，而是现有项的视觉位置重新分布
- 解决方案：放弃依赖框架的过渡组件，手动维护每个 item 的目标
transform值，用requestAnimationFrame+ CSS 过渡驱动归位 - 性能提示：别在每次
mousemove都触发重排，拖拽中只更新被拖元素；排序结束才批量更新其余元素的transform
will-change 和统一使用 transform，这两点一缺，无缝感就断了。 
