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?

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?

• javascript
• reactjs
• animation
• browser
• material-ui

2 Answers 2

I also expected addEndListener (Collapse API) to trigger after the animation, which isn't the case. Similar to Sereyn's answer, this worked for me:

      <Collapse
        onEntered={() => console.log("expand animation done")}
        onExited={() => console.log("collapse animation done")}
        in={checked}
      >
        {icon}
      </Collapse>

There is no such a prop as onTransitionEnd neither in API of Collapse ponent, nor in the Transition ponent 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>