title: CSSTransitionGroup component doesn't leave properly
body: <p>I'm trying to create a modal for logging in with a mask that fades in when you click login button and fades out when you close it. I decided to us 'react-transition-group' library for implementing that. Fading in works fine, but it fades out right away, without the animation being applied. How can I make it work?</p>
  
  <p>Connected component:</p>
  
  <pre><code>&lt;div&gt;
                  &lt;ModalRoot {...this.props}&gt;
                      &lt;Grid&gt;
                          &lt;Menu {...this.props}/&gt;
                          &lt;div className='wrapper'&gt;
                              &lt;div className='content'&gt;
                                  &lt;Form postTodo={this.props.postTodo}/&gt;
                                  &lt;ul className='todo-list'&gt;
                                     &lt;CSSTransitionGroup
                                      transitionName='todo'
                                      transitionEnterTimeout={500}
                                      transitionLeaveTimeout={300}&gt;
                                          {todoItems}
                                      &lt;/CSSTransitionGroup&gt;    
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/Grid&gt;
                  &lt;/ModalRoot&gt; 
              &lt;/div&gt;
  </code></pre>
  
  <p>ModalRoot:</p>
  
  <pre><code>const MODAL_COMPONENTS = {
    LOGIN_MODAL: LoginModal,
    /* other modals */
  };
  
  const ModalRoot = (props: any) =&gt; {
      const {isVisible, isMaskShown, window} = props.modal;
      const Modal = MODAL_COMPONENTS[window];
      if(!isVisible) {
        return (
          &lt;div&gt;
            {props.children}
          &lt;/div&gt;
        );
      }
      if(isMaskShown) {
        return (
          &lt;CSSTransitionGroup
            transitionName='mask'
            transitionAppear={true}
            transitionAppearTimeout={500}
            transitionEnterTimeout={0}
            transitionLeaveTimeout={300}&gt;
              &lt;Mask&gt;
                &lt;Modal key={100} hideModal={props.hideModal} /&gt;
                  {props.children}
              &lt;/Mask&gt;
          &lt;/CSSTransitionGroup&gt;
        );
      }
      if(!isMaskShown) {
        return (
          &lt;div&gt;
            &lt;Modal hideModal={props.hideModal}/&gt;
            {props.children}
          &lt;/div&gt;  
        );
      }
  };
  </code></pre>
  
  <p>LoginModal:</p>
  
  <pre><code>const LoginModal = ({hideModal,presets}) =&gt; {
  
      return (
          &lt;div className='login-modal'&gt;
              &lt;button onClick={hideModal} className='close'&gt;X&lt;/button&gt;
          &lt;/div&gt;
      );
  };
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background: black;
      opacity: 0.75;
  }
  
  .mask-leave {
    opacity: 0.75;
  }  
  
  .mask-leave.mask-leave-active {
    opacity: 0;
    transition: opacity 300ms ease-in;
  }
  
  .mask-appear {
    opacity: 0;
  }
  
  .mask-appear.mask-appear-active {
    opacity: 0.75;
    transition: opacity .5s ease-in;
  }
  </code></pre>