title: React: How to animate the change of the component rendered?
body: <p>I change the component that is rendered through a time interval. </p>
  
  <p>I would like to be able to add an animation every time that change happens. What is the best way to go about it?</p>
  
  <pre><code>constructor (props) {
      super(props)
      this.state = { currentComponent: 1,
      numberOfComponents: 2}
  }
  
  componentWillMount() {
      setInterval(() =&gt; {
         if(this.state.currentComponent === 2) {
             this.setState({currentComponent: 1})
         } else {
             this.setState({currentComponent: this.state.currentComponent + 1})
         }
      }, 5000)
  }
  
  render(){
  
      let currentComponent = null;
  
      if(this.state.currentComponent === 1) {
          currentComponent = &lt;ComponentOne/&gt;;
  
      } else {
          currentComponent = &lt;ComponentTwo/&gt;;
      }
  
      return(
          currentComponent
      )
  }
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>Also when trying to use 'react-addons-css-transition-group'
  I get the following error: </p>
  
  <p><a href="https://i.stack.imgur.com/k6FCG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k6FCG.png" alt="enter image description here"></a></p>