slideUp() and slideDown() animation using React.js
<p>I have created a react component which consist of slideUp() and slideDown() animation. I have implemented using jQuery slideup and slidedown methods.</p>

<p>I have to implement this feature using react animation.</p>

<p>I read about <strong>ReactTransitionGroup</strong> and <strong>ReactCSSTransitionGroup</strong>. The way of explanation taught me, we can do this functionality when <strong>DomNode</strong> mounted to a component or unmount(Correct me if I am wrong).</p>

<p>My question is --> how to do slideup() and slidedown() in react way and without using jQuery.</p>

<p>See this jsFiddle for <a href="https://jsfiddle.net/guc3yrm1/" rel="noreferrer">https://jsfiddle.net/guc3yrm1/</a></p>

<p>P.S - > Please explain me why this react animation part seems bit a difficult when compare to jQuery(I am a jQuery guy)</p>

<pre><code>var Hello = React.createClass({
    getInitialState: function() {
        return {
            slide: false,
        }
    },
    slide: function() {
        if (this.state.slide) {
            $(this.refs.slide).slideDown();
            this.setState({
                slide: false
            });
        } else {
            $(this.refs.slide).slideUp();
            this.setState({
                slide: true
            });
        }
    },
    render: function() {
        return ( 
            &lt;div&gt;
                &lt;input type = "button" value = "clickme" onClick = {this.slide}/&gt; 
                &lt;br /&gt;
                &lt;br /&gt;
                &lt;div className = "slide" ref="slide" &gt;&lt; /div&gt;
            &lt;/div&gt;
        );
    }
});

ReactDOM.render( &lt; Hello name = "World" / &gt; ,
    document.getElementById('container')
);
</code></pre>