title: React smooth transition between different states in a component
body: <p>I have a simple component like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>var component = React.createClass({
    render: function(){
        if (this.props.isCollapsed){
           return this.renderCollapsed();
        }
        return this.renderActive()
    },
    renderActive: function(){
      return (
        &lt;div&gt;
        ...
        &lt;/div&gt;
      );
    },
    renderCollapsed: function(){
      return (
        &lt;div&gt;
        ...
        &lt;/div&gt;
      );
    },
  });
  </code></pre>
  
  <p>Basically, when the property changes, the component will either show active state or collapse state. </p>
  
  <p>What I am thinking is, when the property change happens, i.e. active->collapse, or the other way around, I want the old view "shrink" or "expand" smoothly to show the new view. For example, if it is active -> collapse, I want the active UI to shrink to the size of collapse UI, and show it smoothly.</p>
  
  <p>I am not sure how to achieve this effect. Please share some ideas. Thanks! </p>