atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.41k stars 2.58k forks source link

fire a transition end event move rbd along #1976

Open longhaha1998 opened 4 years ago

longhaha1998 commented 4 years ago

We are in work around territory now.

https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/types.md#draggable

type DropAnimation = {|
  duration: number,
  curve: string,
  moveTo: Position,
  opacity: ?number,
  scale: ?number,
|};

You could manually fire a transition end event move rbd along. Would you like some input on how to do that?

Yes please! How can i do this? Please!

longhaha1998 commented 4 years ago

Hey guys!I found a solution, and it seems to work!

onTouchEnd={() => {
    this.onTouchEnd(
       provided.draggableProps.onTransitionEnd
    );
}}

onTouchEnd(onTransitionEnd) {
    const { toggleIsDragging } = this.props;
    if (onTransitionEnd) {
        setTimeout(() => {
            onTransitionEnd({
                propertyName: 'transform',
            });
        }, 330);
    } else {
        toggleIsDragging(false);
    }
}

It looks ugly, but it solves my problem.