Css 使用DND在掉落的物品上添加淡出动画

我正在使用DND库在列之间拖动项（方形div）或在同一列中重新排序。我按照他们的Egghead视频教程，在拖动div时更改其背景颜色。当它被删除时，它会切换回所有其他项目的默认颜色。我想它慢慢淡出（像1秒可能）的默认颜色后，它被删除

下面是我当前在拖放div时的代码样式。我添加了过渡线，但没有做任何事情

const MyOrder = styled.div`
    background-color: ${(props) =>
        props.isDragging ? '#4FB740' : '#193DF4'};
    transition: background-color 1s ease;
`;

我已尝试将此代码添加到

onDragEnd

事件：

        setDroppedOrderID(theOrder.orderNumber);
        setTimeout(() => {
          setDroppedOrderID('');
        }, 2000);

我把被拖拽的订单div做成这样：

<MyOrder
        id={orderNumber}
        className={`order size-${size} ${
            droppedOrderID === orderNumber ? ' dropped' : ''
        } ${palletLoc === 'OUTSIDE' ? 'outside' : ''}`}

您可以


您需要使用
快照
中的
isDropAnimating
属性来检查是否正在制作动画，以便有条件地返回原始样式

代码片段

const OpportunityContainer=styled.div`
边框：1px实心#ddd；
边界半径：0.3rem；
背景：#fff；
填充：1rem；
保证金底部：0.8雷姆；
过渡：背景色；
背景色：${props=>（props.ISDRAGING？#4FB740:“#193DF4”）；
`;
函数getStyle（样式、快照）{
如果（！snapshot.isDropAnimating）{
回归风格；
}
//修补现有样式
返回{
风格
转换：`all 3s ease`，
背景颜色：“蓝色”
};
}
const Opportunity=React.memo（{index，id，title}）=>{
返回(
{（已提供，快照）=>(
{title}
)}
);
});
出口违约机会；

注意-确保阅读<代码>IsDraging

将为真，直到动画/淡出完成。因此，尽量减少动画的持续时间（例如：1秒或少于1秒）

你能发布一个可运行的代码吗？哇，这太令人印象深刻了！快速跟进问题，是否可以让它保持绿色2秒钟，然后淡入蓝色？是的-您可以添加

过渡显示：“2s”

。。。我已经更新了代码沙盒…刷新浏览器并检查。我刚刚注意到一些不可靠的东西。将项目拖动到某个位置后，将无法再拖动该项目。你知道为什么吗？好的-刚刚在图书馆看到关于不一致性的注释。。。放置后，如果您轻轻触摸/移动其他元素，您将能够再次移动放置的项目。。。这是图书馆的一期。。。这里已经很晚了。。。在我的早晨，我将找到一种方法来克服这种不一致性，并使它为youhi工作-很抱歉延迟响应-我很忙。。。。实际上，修复起来很棘手，但修复起来很简单。。。。在

getStyle

方法中，只需将

all

添加到

transition

…基本上您需要完成所有的转换。。不仅仅是背景。。。代码沙盒已更新，只需刷新