dnd-kit 可排序动画在 DragEnd 上触发两次

Question

当我交换网格上两个遥远的项目时，它会“重做”交换动画（向后然后再次向前）。当物品非常接近时，效果很好，如下面的 gif 所示：

我已经遵循了Sortable docs，但我不明白为什么它要重做动画。我只想将它放在网格单元上并将旧项目保留在它已经所在的位置，而不是再次执行动画

这是代码示例的链接

Answer 1

显然我解决了它，在

animateLayoutChanges: () => false

钩子上设置

useSortable

Answer 2

  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({
      id: image,
      transition: {
        duration: 500,
        easing: "cubic-bezier(0.25, 1, 0.5, 1)",
      },
    });

这是我发现的更好的解决方案，因为 animateLayoutChanges: () => false 将所有转换设置为 false。