CODEWITHSUNDEEP
cssreactjscss-animationsreact-beautiful-dnd
dmikester1
dmikester1

Reputation: 1372

Add fade out animation on dropped item with React Beautiful DND

I am using the React Beautiful DND library to drag items(square divs) between columns or reordered in the same column. I followed their Egghead video tutorial to change the background color of the div as it's being dragged. When it gets dropped, it switches back to the default color of all other items. I want it to slowly fade(like 1 second maybe) to the default color after it is dropped.

Here is my current code styling for the div as it's being dragged and dropped. I added the transition line, that but is not doing anything.

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

I have tried adding this code to the onDragEnd event:

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

And I made the order div that gets dragged look like this:

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

But it is buggy if someone tries to drag the same item in less than the 2 second time interval.

Upvotes: 1

Views: 4250

Answers (1)

gdh
gdh

Reputation: 13682

You can actually style the drop and do animation

See working demo & full code here in the codesandbox

You need to use isDropAnimating property from the snapshot to check if animation is being done so that you can conditionally return the original style.

code snippet

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;

Note - Make sure to read this note in the library documentation. isDragging will be true until animation/fade-out is completed. Therefore try to provide less duration for your animation (eg: 1 second or less than 1 second)

Upvotes: 1

Related Questions