jQuery and ReactJS ONLY animations

Question

I ONLY need to use jQuery animations, please do not mention the transitions.

This is my code base

var CommentForm = React.createClass({

    componentWillUnmount: function(cb) {
        console.log('hiding')
        jQuery(this.getDOMNode()).slideUp('slow', cb);
        console.log((this.getDOMNode()))
    },

    componentDidMount: function() {

        jQuery(this.getDOMNode()).hide().slideDown('slow');

        if (this.props.autofocus) {
            jQuery(this.refs.commentArea.getDOMNode()).focus();
        }

    },

    render: function() {
        return (
            <div>
                <div className="panel-footer" ref="commentComponent">
                    <form role="form">
                        <div className="form-group">
                            <textarea className="form-control" placeholder="Say something nice!" ref="commentArea"></textarea>
                        </div>
                        <div className="pull-right">
                            <button className="btn btn-default btn-md" type="button"><span className="fa fa-comment"></span> Comment</button>
                        </div>
                        <div className="clearfix"></div>
                    </form>
                </div>
            </div>
        );
    }

});

So as you may see, I could add an awesome animation when the component is mounted, but I cannot unmount the component with the animation as I have mentioned on the code.

Any thoughts how to do this just with jQuery ? and Reactjs Component Life Cycle ?

Answer 1

Here is my attempt in solving this issue using an overly simplistic demonstration.

jsFiddle.

JavaScript:

var Container = React.createClass({
    onClicked: function() {
        console.log('Container.onClicked');
        if(this.state.isShowing){
            this.refs.myHelloWorld.hide();
        } else {
            this.setState({ isShowing: true });
        }
    },
    onAnimationComplete: function() {
        console.log('Container.onAnimationComplete');
        this.setState({ isShowing: false });
    },
    getInitialState: function() {
        return { isShowing: false };
    },
    render: function() {
        var helloWorld = this.state.isShowing ? <Hello name="World!" onComplete={this.onAnimationComplete} ref="myHelloWorld" /> : '';
        return (
            <div id="container">
                <MyButton onButtonClicked={this.onClicked}/>
                {helloWorld}
            </div>
        );
    }
});

var MyButton = React.createClass({
    render: function() {
        return <button onClick={this.props.onButtonClicked}>Toggle</button>;
    }
});

var Hello = React.createClass({
    hide: function() {
        console.log('Hello.hide');
        var that = this;
        $(React.findDOMNode(this)).stop(true).fadeOut({
            duration: 1200,
            complete: function() {
                that.props.onComplete();
            }
        });
    },
    componentDidMount: function() {
        console.log('Hello.componentDidMount');
        $(React.findDOMNode(this)).stop(true).hide().fadeIn(1200);
    },
    componentWillUnmount: function() {
        console.log('Hello.componentWillUnmount');
    },
    render: function() {
        return <div>Hello { this.props.name }</div>;
    }
});
React.render(<Container />, document.body);

As you have figured out that it is not very difficult to animate any child component in to the main view by using componentDidMount life-cycle event.

However, it is tricky to do the same when we want to animate out our child component from our main view because the corresponding componentWillUnmount life-cycle event triggers after our view has actually un-mounted and there is no event available that we could use before that. And even if there was, we would have then had to manually remove our child component either from within itself or from the main view. I was initially thinking of using React.unmountComponentAtNode to do just the same but then figured out another way.

The solution is to first send a callback from main view to the child component as a parameter that would be used later. We then call child component's another method which would animate out the component's DOM node itself. And then finally, when the animation is complete, we would trigger the same callback that we received earlier.

Hope this helps.

P.S. This approach is not tightly bound by jQuery's animate() and related methods but instead, this approach can be used for any other JS-based animation libraries (I am looking at my favourite GSAP ;)), as long as they trigger a callback when the animation is completed (and GSAP provides a plethora of them).

Update #1 :

Wah wah vee va!

So as it happens, I was digging ReactJS more and especially its animation parts and look what I found, they have exposed a low-level API for transition events.

So that thing we were trying to accomplish earlier with our own callbacks, and our props object maintaining a reference to etc, it turns out, it can be done using this API itself.

I am not exactly sure if I really like it very much at the moment because I am yet to implement both of these techniques in real project but I am happy that we now have options available. We can use the internal API, or we can cook our own solution as proposed earlier.

Take a look at this modified jsFiddle doing the same thing but this time using the internal callbacks such as componentWillEnter and componentWillLeave.