title: slideUp() and slideDown() animation using React.js
body: <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>