Material UI 5: How to know when Collapse transition is finished?-CodePudding

My code

    <Collapse
      in={expanded}
      onTransitionEnd={() => console.log('finished')}
    >
        <div>foo</div>
    </Collapse>

What's wrong

The callback (onTransitionEnd) is not called when the collapse animation is finished.

How should I do?

CodePudding user response：

There is no such a prop as onTransitionEnd neither in API of Collapse component, nor in the Transition component from react-transition-group.

Depending on what exactly you want you can use either addEndListener prop which will fire at the end of both 'in' and 'out' animations, or onExited which will fire at the end of 'out' animation.

          <Collapse
            addEndListener={() => console.log("done")}
            onExited={() => console.log("finished")}
            in={checked}
          >
            {icon}
          </Collapse>