title: React, transition group - css transitions when swapping components
body: <p>I have a component that swaps child components in ( it is a small quiz, and the child components are questions. I am trying to animate the swap of components using <code>ReactCSSTransitionGroup</code>.</p>
  
  <p>So, I have a function that renders the components, that I am swapping wrapping in the <code>ReactCSSTransitionGroup</code> like so : </p>
  
  <pre><code>render() {
    return (
      &lt;div className=" questions-container"&gt;
        &lt;ReactCSSTransitionGroup transitionName="switch"&gt;
          {this.renderQuiz(step)}
        &lt;/ReactCSSTransitionGroup&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>The renderQuiz function is just a switch statement that returns the correct component based on the right state - something like this:</p>
  
  <pre><code>renderQuiz(step) {
    switch (step) {
      case 0:
        return (
          &lt;StepZero /&gt;
        );
      case 1:
        return (
          &lt;StepOne /&gt;
        );
      ....
    }
  }
  </code></pre>
  
  <p>Step is just a local component variable (this.state.step). I see this only partially working - when the first component loads I see it fade in, but there is no transition between switching the components. </p>
  
  <p>Here is the CSS associated with the transition: </p>
  
  <pre><code>.switch-enter {
    opacity: 0.01;
  }
  
  .switch-enter.switch-enter-active {
    opacity: 1.0;
    transition: opacity 500ms ease-in;
  }
  
  .switch-leave {
    opacity: 1.0;
  }
  
  .switch-leave.switch-leave-active {
    opacity: 0;
    transition: opacity 500ms ease-out;
  }
  </code></pre>
  
  <p>Unsure how to get this to work properly. Any input would be greatly appreciated. Thanks!</p>