React中@dnd-kit拖拽元素时延迟占位符过渡的问题

核心思路是不要直接用isOver控制占位符的expanded类，而是通过独立状态延迟移除展开状态，确保元素插入完成后再执行占位符的收缩过渡。

具体实现步骤： #

1. 新增独立状态控制占位符展开
   在组件里添加一个状态替代直接使用isOver来控制expanded类：

   const [isPlaceholderExpanded, setIsPlaceholderExpanded] = useState(false);
   

2. 同步拖拽进入时的展开状态
   在onDragOver回调里设置占位符为展开状态：

   const handleDragOver = useCallback(() => {
     setIsPlaceholderExpanded(true);
   }, []);
   

3. 延迟关闭占位符展开状态
   不要在isOver变为false时立刻关闭，而是等拖拽结束且元素插入完成后再处理：

   • 利用@dnd-kit的onDragEnd回调，结合setTimeout（时间和元素插入的过渡时长匹配）来延迟关闭：

   const handleDragEnd = useCallback(() => {
     setTimeout(() => {
       setIsPlaceholderExpanded(false);
     }, 300); // 时长根据你的元素插入过渡动画调整
   }, []);
   

   • 更精准的方式：监听目标列表元素的transitionend事件，当元素插入的过渡完成后，再关闭占位符的展开状态。

4. 修改占位符的类名控制逻辑
   把原来依赖isOver的地方换成isPlaceholderExpanded：

   <div className={`placeholder ${isPlaceholderExpanded ? 'expanded' : ''}`} />
   

额外优化点： #

• 结合@dnd-kit的active状态判断拖拽是否真正结束，避免误触发延迟。
• 如果使用@dnd-kit/sortable，可以在onSortEnd回调里处理占位符状态更新，确保排序完成后再收缩占位符。

内容的提问来源于stack exchange，提问作者imalgrab