React: Callback after exiting CSSTransitionGroup

Question

Is there a way to run the function after the holiday animation is complete? Or is my only alternative to using a low-level animation API ? If so, I assume that I would have to implement all the functionality of the transition (transition, return, etc.)?

Js

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; var SignalContent = React.createClass({ render: function() { return ( <div className='signal'> <p className='signal-message'>{this.props.message}</p> <button onClick={this.props.onClose} aria-label='Close'><span className='material-icons'>close</span></button> </div> ); } }); var Signal = React.createClass({ handleClose: function() { this.setState({active: false}) // this.props.onClose(); }, getInitialState: function() { return { active: true }; }, render: function() { return ( <ReactCSSTransitionGroup transitionName='signal-transition' transitionAppear={true} component='div'> {this.state.active ? <SignalContent message={this.props.message} onClose={this.handleClose} /> : ''} </ReactCSSTransitionGroup> ); } }); var container = document.getElementById('container'); function handleClose() { React.unmountComponentAtNode(container); } React.render(<Signal message='test message' onClose={handleClose} />, container); 

CSS

 .signal { padding: 10px; color: #fff; background-color: #000; } .signal-transition-appear { opacity: 0; } .signal-transition-appear-active { opacity: 1; transition: .5s; } .signal-transition-leave-active { opacity: 0; transition: .5s; } 

JSFiddle . In the example, I try to run handleClose() when the signal has completed the animation.