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

This is my code base

var CommentForm = React.createClass({

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

    ponentDidMount: function() {

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

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

    },

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

});

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

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

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

This is my code base

var CommentForm = React.createClass({

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

    ponentDidMount: function() {

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

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

    },

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

});

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

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

• javascript
• jquery
• jquery-animate
• reactjs

• Is it possible for you to create a jsFiddle of it? I may be getting into this exactly same scenario in near future and thus, I would like to attempt to resolve it now. Please create a jsFiddle out of it. – Tahir Ahmed Commented Jul 11, 2015 at 12:08

1 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,
            plete: function() {
                that.props.onComplete();
            }
        });
    },
    ponentDidMount: function() {
        console.log('Hello.ponentDidMount');
        $(React.findDOMNode(this)).stop(true).hide().fadeIn(1200);
    },
    ponentWillUnmount: function() {
        console.log('Hello.ponentWillUnmount');
    },
    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 ponent in to the main view by using ponentDidMount life-cycle event.

However, it is tricky to do the same when we want to animate out our child ponent from our main view because the corresponding ponentWillUnmount 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 ponent 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 ponent as a parameter that would be used later. We then call child ponent's another method which would animate out the ponent's DOM node itself. And then finally, when the animation is plete, 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 pleted (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 acplish 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 ponentWillEnter and ponentWillLeave.