使用 React Beautiful DND 在丢弃的项目上添加淡出动画

Question

我正在使用 React Beautiful 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' : ''}`}

但如果有人试图在不到 2 秒的时间间隔内拖动同一个项目，则会出现问题。

Answer 1

你实际上可以style the drop和do animation

See working demo & full code here in the codesandbox

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

代码 sn-p

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。 isDragging 将在动画/淡出完成之前为真。因此尽量缩短动画的持续时间（例如：1 秒或少于 1 秒）