title: TransitionGroup and CssTransition: Exit transition not applied
body: <p>I migrated from the old <code>CSSTransitionGroup</code> to the new <a href="https://github.com/reactjs/react-transition-group" rel="noreferrer">react-transition-group</a> <code>CSSTransition</code> and <code>TransitionGroup</code>.</p>
  
  <p>I'm creating (hacking) an overlay loader and I'm trying to apply animation to the overlay when it appears and disappears. </p>
  
  <p>Specifically when I pass an <code>active=true</code> props to the <code>LoadingOverlayWrapper</code> then a new <code>CSSTransition</code> is added to the <code>TransitionGroup</code> (the <code>Fade</code>component) that wraps the overlay to show.    </p>
  
  <p>When <code>active=false</code> then the <code>CSSTransition</code> is removed from within the <code>TransitionGroup</code> (the direct child of <code>TransitionGroup</code>is <code>null</code>). </p>
  
  <p>This is the relevant part of the code:</p>
  
  <pre><code>import React, {Children} from 'react'
  import PropTypes from 'prop-types'
  import {CSSTransition, TransitionGroup} from 'react-transition-group'
  import LoadingOverlay from "./LoadingOverlay";
  import styles from './Overlay.sass';
  
  
  const FirstChild = props =&gt; Children.toArray(props.children)[0] || null;
  
  const Fade = (props) =&gt; (
    &lt;CSSTransition
      {...props}
      timeout={500}
      classNames={{
        appear: styles.appear,
        appearActive: styles.appearActive,
        enter: styles.enter,
        enterActive: styles.enterActive,
        exit: styles.exit,
        exitActive: styles.exitActive
      }}
    &gt;
      &lt;FirstChild {...props} /&gt;
    &lt;/CSSTransition&gt;
  );
  
  
  class LoadingOverlayWrapper extends React.Component {
  
    render() {
      const {active} = this.props;
  
      return (
        &lt;div&gt;
          &lt;TransitionGroup&gt;
            {
              active ?
              (
                &lt;Fade key='transition_effect'&gt;
                  &lt;LoadingOverlay key='the_dimmer' {...this.props} /&gt;
                &lt;/Fade&gt;
              )
              :
              null
            }
          &lt;/TransitionGroup&gt;
          {this.props.children}
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>And this is the relevant sass file (imported as css module):</p>
  
  <pre><code>.enter, .appear
    opacity: 0.01
  
  .appearActive, .enterActive
    opacity: 1
    transition: opacity .5s ease-in
  
  .exit, .leave
    opacity: 0.01
  
  .exitActive, .leaveActive
    opacity: 0
    transition: opacity .5s ease-in
  </code></pre>
  
  <p>The enter (or appear, not sure here) transition works.  </p>
  
  <p>The <strong>problem</strong> is that when I remove the <code>Fade</code> component, being replace by <code>null</code> then the exit transition is not applied (or not visible) but I get no error, everything else works as intended. </p>
  
  <p>I'm not sure how to debug or proceed here given I have little experience with React TransitionGroup.</p>