React.js transitions not working for "fade out"
<p>I have a React.js component that I am trying to "fade out" using the React CSS Transitions.  It is working fine for the fade in, but when I click to remove the object, it just disappears immediately (instead of the nice fading effect).</p>

<p>Code:</p>

<pre><code>&lt;ReactCSSTransitionGroup 
    transitionName="example"
    transitionAppear={true}
    transitionLeave={true}
    transitionEnterTimeout={600}
    transitionAppearTimeout={600}
    transitionLeaveTimeout={300}
&gt;
    some object
&lt;/ReactCSSTransitionGroup&gt;
</code></pre>

<p>CSS:</p>

<p>/<em>React transitions</em>/</p>

<pre><code>.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity 1s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

.example-appear {
  opacity: 0.01;
  transition: opacity 1s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}
</code></pre>