title: React animate transition between components
body: <p>I'd like to animate between two components where the first component fades out and is removed from the DOM before the next component is added to the DOM and fades in. Otherwise, the new component is added to the DOM and takes up space before the old component is removed. You can see the problem in this fiddle:</p>
  
  <p><a href="http://jsfiddle.net/phepyezx/4">http://jsfiddle.net/phepyezx/4</a></p>
  
  <pre><code>// css snippet
  .switch-enter {
      opacity: 0.01;
  }
  .switch-enter.switch-enter-active {
      opacity: 1.0;
  }
  .switch-leave {
      opacity: 1.0;
  }
  .switch-leave.switch-leave-active {
      opacity: 0;
  }
  
  // React snippet 
  &lt;ReactCSSTransitionGroup transitionName="switch"&gt;
      &lt;div key={key} className={className}&gt;{this.text()}&lt;/div&gt;
  &lt;/ReactCSSTransitionGroup&gt;
  </code></pre>
  
  <p>An unacceptable solution (for me) is to hide the original component with css before transitioning to the new component as seen here:</p>
  
  <p><a href="http://jsfiddle.net/phepyezx/5">http://jsfiddle.net/phepyezx/5</a></p>
  
  <pre><code>// Change to css
  .switch-leave {
      visibility: hidden;
      height: 0px;
      width: 0px;
      opacity: 1.0;
  }
  </code></pre>
  
  <p>Is there a way to "delay" react from mounting a new component before the original is removed? I'm open to velocity or some other library to achieve this.</p>
  
  <p>Thanks</p>