1

我正在使用 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 秒的时间间隔内拖动同一个项目，那将是错误的。

4

1 回答 1

1

您实际上可以设置下拉样式并制作动画

在代码框中查看工作演示和完整代码

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

代码片段

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;

注意- 请务必阅读库文档中的此说明。isDragging在动画/淡出完成之前将是真实的。因此尝试为您的动画提供更短的持续时间（例如：1 秒或少于 1 秒）

于 2020-06-16T03:59:16.037 回答