title: React animate with CSSTransitionGroup on toggle
body: <p>I am trying to get a transition between components entering and leaving when the button is clicked to toggle between state</p>
  
  <p>I have also tried putting <code>&lt;UserDetails /&gt;</code> and <code>&lt;UserEdit /&gt;</code> as seperate components but have the same result in that no animation is triggered.</p>
  
  <p><a href="https://www.webpackbin.com/bins/-KjIPcMeQF3iriHRqTBW" rel="nofollow noreferrer">https://www.webpackbin.com/bins/-KjIPcMeQF3iriHRqTBW</a></p>
  
  <p><strong>Hello.js</strong></p>
  
  <pre><code>import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
  import './styles.css'
  export default class Hello extends React.Component {
  constructor() {
  super()
  
  this.state = { showEdit: false }
  this.handleEdit = this.handleEdit.bind(this)
  }
  
  handleEdit() { this.setState({ showEdit: !this.state.showEdit }) } 
  
  render() {
  
   const UserDetails = () =&gt; (
   &lt;div className="componenta" key="1"&gt;UserDetails&lt;/div&gt;
   )
   const UserEdit = () =&gt; (
   &lt;div className="componentb" key="2"&gt;UserEdit&lt;/div&gt;
   )
  
  return(
  &lt;div &gt;
      &lt;CSSTransitionGroup 
        transitionName="example"
        transitionEnterTimeout={10}
        transitionLeaveTimeout={600}&gt;
      {this.state.showEdit ? &lt;UserDetails /&gt; : &lt;UserEdit /&gt;}
      &lt;/CSSTransitionGroup&gt;
      &lt;button onClick={this.handleEdit}&gt;Toggle&lt;/button&gt;
  &lt;/div&gt;
  )
  }
  }
  </code></pre>
  
  <p><strong>styles.css</strong></p>
  
  <pre><code>.thing-enter {
   opacity: 0.01;
   transition: opacity 1s ease-in;
  }
  
  .thing-enter.thing-enter-active {
    opacity: 1;
  }
  
   .thing-leave {
    opacity: 1;
    transition: opacity 1s ease-in;
   }
  
   .thing-leave.thing-leave-active {
    opacity: 0.01;
   }
  </code></pre>