title: CSSTransitionGroup is not working
body: <p>In my project I have one element which contains all of the content of the pages. Its class name is 'page-wrapper'. Now, I have a navbar which contains links to different parts in the app. I want the everytime a link is clicked, I want the page wrapper to fade in and not load instantly.</p>
  
  <p>I read about CSSTransitionGroup but it doesn't work at all for me.
  Here is the code for my main component:</p>
  
  <pre><code>/**
   *
   * LoadingProvider
   *
   */
  
  import React from 'react';
  import { withRouter } from 'react-router-dom';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { compose } from 'redux';
  import { CSSTransitionGroup } from 'react-transition-group';
  import LoadingScreen from '../../components/LoadingScreen';
  import Navbar from '../../components/Navbar';
  import Footer from '../../components/Footer';
  import BidsCart from '../../components/BidsCart';
  import MazalModal from '../../components/MazalModal';
  import { selectMainDomain } from './selectors';
  
  export class LoadingProvider extends React.Component { // eslint-disable-line react/prefer-stateless-function
    constructor(props) {
      super(props);
  
      this.state = {
        darkThemed: ['/about'],
      };
    }
  
    render() {
      const { isLoading, isMazalShown, newBid, location } = this.props;
      const { darkThemed } = this.state;
      const { pathname } = location;
      return (
        &lt;div&gt;
          &lt;CSSTransitionGroup
            transitionName="example"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}
          &gt;
            &lt;div key={0} className="page-wrapper"&gt;
              &lt;Navbar
                path={pathname}
                dark={darkThemed.includes(pathname)}
              /&gt;
              &lt;MazalModal /&gt;
              {isMazalShown ?
                &lt;MazalModal
                  isMazalShown={isMazalShown}
                  newBid={newBid}
                /&gt;
              : null}
              {isLoading ? &lt;LoadingScreen /&gt; : null}
              {this.props.children}
  
              &lt;BidsCart /&gt;
              &lt;Footer /&gt;
            &lt;/div&gt;
          &lt;/CSSTransitionGroup&gt;
        &lt;/div&gt;
      );
    }
  }
  
  LoadingProvider.propTypes = {
    location: PropTypes.object,
    isLoading: PropTypes.bool,
    isMazalShown: PropTypes.bool,
    newBid: PropTypes.object,
    children: PropTypes.object.isRequired,
  };
  
  
  const mapStateToProps = selectMainDomain;
  const withConnect = connect(mapStateToProps, null);
  
  export default compose(
    withConnect,
    withRouter,
  )(LoadingProvider);
  </code></pre>
  
  <p>And here is the global-styles.js file(I work with react-boilerplate):</p>
  
  <pre><code>import { injectGlobal } from 'styled-components';
  
  /* eslint no-unused-expressions: 0 */
  injectGlobal`
    @import url('https://fonts.googleapis.com/css?family=Assistant:400,600,700,800');
  
    html {
      height: 100%;
      width: 100%;
    }
  
    body {
      min-height: 100%;
      position: relative;
      padding-bottom: 130px;
      overflow-x: hidden;
      font-family: 'Assistant', sans-serif;
      user-select: none;
      letter-spacing: -0.6px;
    }
  
    body form input {
      font-family: 'Assistant', sans-serif;    
    }
  
    body.fontLoaded {
      font-family: Assistant;
    }
  
    #app {
      background-color: #ffffff;
      min-height: 100%;
      min-width: 100%;
    }
  
    body::-webkit-scrollbar {
      width: 0.6em;
  }
  
  body::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
  }
  
  .example-enter {
    opacity: 0.01;
  }
  
  .example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
  }
  
  .example-leave {
    opacity: 1;
  }
  
  .example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
  }
  
  @keyframes fadeanimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }
  
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: 300ms all;
  }
  
  .modal {
    position: absolute;
    width: 586px;
    height: 477px;
    top: 14%;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 40px;
    border-radius: 6px;
    background-color: #f3f8fb;
    border: solid 1px rgba(0, 0, 0, 0.1);
    outline: none;
  }
  
  .modal .close-modal {
    position: absolute;
    right: 0;
    top: 0;
    outline: none;
    cursor: pointer;
    margin: 5px 6px;
  }
  
  .modal .close-modal svg {
    width: 11px;
    fill: #1b2e44;
    fill-opacity: 0.5;
  }
  
  .ReactModal__Content {
    opacity: 0;
  }
  
  .ReactModal__Content--after-open {
    opacity: 1;
    transition: 300ms;
  }
  
  .ReactModal__Content--before-close {
    opacity: 0;
  }
  
  .ReactModal__Overlay.ReactModal__Overlay--after-open.overlay {
    opacity: 1;
  }
  
  .ReactModal__Overlay.ReactModal__Overlay--before-close.overlay {
    opacity: 0;
  }
  
  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  `;
  </code></pre>
  
  <p>As you can see, I included all the relevant css. I just copied from the docs.
  I don't understand why it's not working.</p>