多列表拖拽动画需区分拖拽过程与排序完成两类动画：前者须禁用原生drag，用pointer事件+绝对定位影子+transform腾位；后者可借框架如<transition-group>或framer-motion实现归位滑动。
多列表拖拽动画不是简单加个 transition 就能生效的，关键在于区分“拖拽过程动画”和“排序完成动画”，并针对不同场景选对技术路径。
区分两类动画：过程 vs 归位
浏览器原生 drag API 不提供拖拽中的视觉过渡——松手前元素还在原位，松手后瞬间跳到新位置。所以：
-
拖拽过程动画（卡片跟随鼠标、其他项平滑腾位）必须手动模拟：禁用原生 drag，用
pointerdown/move/up+ 绝对定位影子元素 + 实时更新其他项的transform: translateY()，所有过渡作用于transform或opacity，时长控制在 150–250ms -
排序完成动画（松手后卡片滑入目标位置、占位项回弹）可由框架辅助：Vue 用
<transition-group>配.list-move类；React 推荐framer-motion的<motion.li>自动处理 layout motion；SortableJS 的animation: 150仅控制这类归位，但需配合 CSS 中同名类生效
多列表间拖拽：Group 配置决定动画边界
用 SortableJS 或 react-beautiful-dnd 时，动画是否跨列表，取决于 group 或 type 的隔离策略：
- 设相同
group.name（如{ name: 'task-board' }），且pull: true、put: true，则两列之间允许搬运，归位动画会跨容器触发 - 若需严格隔离（如每列只能内部排序），就为每列分配唯一
droppableId（如column-1、column-2），并在onDragEnd中校验source.droppableId === destination.droppableId，否则拒绝移动——这样动画只发生在单列内 - 注意：MUI Accordion 等条件渲染组件会导致
<Droppable>卸载，破坏动画上下文，必须改用受控折叠逻辑，确保 Droppable 始终挂载
避免常见失效点
很多动画“写了却没反应”，往往卡在这些细节：
- 用了虚拟滚动（如
vue-virtual-scroller或react-window）：其内部靠transform: translateY复用 DOM，与排序动画冲突，动画基本失效；要么关掉虚拟滚动，要么换用支持 layout motion 的方案（如react-window+ 手动插值） - 给被拖元素设了
position: relative再用top/left移动：触发重排，卡顿且无法 GPU 加速；必须只用transform - 列表项高度不固定（如含展开内容）：纯
translateY无法自动适配占位高度，视觉上会重叠或留白；需结合getBoundingClientRect动态计算高度差，或改用基于 flex/grid 的 gap 占位 + layout motion - CSS 类名没对齐：SortableJS 的
animation依赖.sortable-ghost和.sortable-chosen等类控制样式，缺一不可；<transition-group>要求每个key唯一且稳定（禁用数组索引）
移动端兼容要另起一套
原生 drag API 在 iOS Safari 和 Android WebView 中基本不可用，尤其非可编辑区域无法触发 drop。稳妥做法是：
- 检测
'ontouchstart' in window或 UA，启用 pointer 事件 fallback - 用
touchstart → touchmove → touchend模拟拖拽，影子元素用fixed定位 +translate3d，其他项用transform: scaleY(0.98)微调视觉反馈 - 禁用默认缩放：
<meta name="viewport" content="user-scalable=no">，防止拖拽中页面意外缩放打断动画
