title: ReactCSSTransitionGroup with CSS Modules
body: <p>I have a ReactCSSTransitionGroup I'm using with CSS Modules (and dynamic routing from react-router but I believe this is working as expected).</p>
  
  <pre><code>&lt;ReactCSSTransitionGroup
    component="div"
    transitionName={transitions}
    transitionAppear
    transitionAppearTimeout={1000}
    transitionEnterTimeout={2000}
    transitionLeaveTimeout={2000}
  &gt;
    {React.cloneElement(this.props.children, {
      key: location.pathname,
    })}
  &lt;/ReactCSSTransitionGroup&gt;
  </code></pre>
  
  <p>The <code>appear</code> and <code>leave</code> transitions work perfectly - but the <code>enter</code> transitions do not - they simply appear immediately, with the previous component fading out after the new component has entered.</p>
  
  <p>The CSS (using CSS Modules):</p>
  
  <pre><code>.enter {
    opacity: 0.01;
  }
  
  .enter.enterActive {
    opacity: 1;
    transition: opacity 500ms ease-in;
  }
  
  .leave.leaveActive {
    opacity: 0.01;
    transition: opacity 2000ms ease-in;
  }
  
  .appear {
    opacity: 0.1;
    transition: opacity 1000ms ease-out;
  }
  
  .appearActive {
    opacity: 1;
    transition: opacity 1000ms ease-out;
  }
  </code></pre>
  
  <p><strong>--- EDIT ---</strong></p>
  
  <p>I discovered that it works as expected on child routes (I only have a small handful of those in my app). All routes including child routes are loaded dynamically, so I'm still not sure what causes it to work in those cases but not in others.</p>