title: React CSS Transitions
body: <p>I'm learning React CSS Transitions. So I decided to make a sliding sidebar navigation. The sidebar slides in from right just fine. But I can't get leave animations working. I'm not sure what's going on. </p>
  
  <p>The jsx: </p>
  
  <pre><code>render: function() {
  return(
    &lt;div className="_Sidebar"&gt;
      &lt;div className="top"&gt;
        &lt;i
          className="menuIcon fa fa-bars"
          onClick={() =&gt; this.handleClick()}&gt;
        &lt;/i&gt;
        &lt;UserName /&gt;
      &lt;/div&gt;
      {this.state.show ?
        &lt;ReactCSSTransitionGroup
          transitionName="example"
          transitionAppear={true}
          transitionLeave={true} &gt;
          &lt;div key={"slidebar"} className="sidebar"&gt;
            {this.handleItems()}
          &lt;/div&gt;
        &lt;/ReactCSSTransitionGroup&gt;
        : null}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>And the css: </p>
  
  <pre><code>.example-appear {
   left: -230px;
   transition: left .9s ease-in;
  }
  
  .example-appear.example-appear-active {
   left: 0px;
  }
  
  .example-leave {
   left: 0px;
   transition: left .9s ease-out;
  }
  
  .example-leave.example-leave-active {
   left: -230px;
  }
  </code></pre>