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

Question

我正在使用 React Beautiful DND 库在列之间拖动项目（正方形 divs）或在同一列中重新排序。我按照他们的 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' : ''}`}

但是，如果有人试图在不到 2 秒的时间间隔内拖动同一项目，那将是错误的。

Answer 1

其实你可以style the drop and do animation

See working demo & full code here in the codesandbox

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

代码片段

const OpportunityContainer = styled.div`
  border: 1px solid #ddd;
  border-radius: 0.3rem;
  background: #fff;
  padding: 1rem;
  margin-bottom: 0.8rem;
  transition: background-color 5s ease;
  background-color: ${props => (props.isDragging ? "#4FB740" : "#193DF4")};
`;
function getStyle(style, snapshot) {
  if (!snapshot.isDropAnimating) {
    return style;
  }

  // patching the existing style
  return {
    ...style,
    transition: `all 3s ease`,
    backgroundColor: "blue"
  };
}
const Opportunity = React.memo(({ index, id, title }) => {
  return (
    <Draggable draggableId={id} index={index}>
      {(provided, snapshot) => (
        <OpportunityContainer
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          isDragging={snapshot.isDragging && !snapshot.isDropAnimating}
          style={getStyle(provided.draggableProps.style, snapshot)}
        >
          {title}
        </OpportunityContainer>
      )}
    </Draggable>
  );
});

export default Opportunity;

注意 - 请务必阅读this note in the library documentation。在 animation/fade-out 完成之前，isDragging 将为真。因此，请尝试为您的动画提供更短的持续时间（例如：1 秒或少于 1 秒）

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

Add fade out animation on dropped item with React Beautiful DND

css

css-animations

reactjs

react-beautiful-dnd