5

Is there a way to run a function after the leave animation has completed? Or is my only alternative to use the low-level animation API? If this is the case I assume I would have have to implement all the transition functionality (transitionend, reflows, etc) myself?

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 am trying to run handleClose() when the signal has finished animating out.

joshhunt
  • 5,197
  • 4
  • 37
  • 60
  • I ended up not using Animation add-on and just manually using transitionend events. However here is a possible alternative using the Animation add-on: http://stackoverflow.com/questions/29977799/how-should-i-handle-a-leave-animation-in-componentwillunmount-in-react – joshhunt Mar 06 '17 at 20:57
  • Have you tried this? https://facebook.github.io/react/docs/animation.html#componentwillleave – Ezz Jul 29 '17 at 00:25
  • @Ezz to be honest I haven't looked at this for almost two years :D – joshhunt Jul 30 '17 at 01:27

0 Answers0