title: react-transition-group CSSTransition slide in on render
body: <p>I'm trying to have a component conditionally render in React and slide it when it does render</p>
  
  <p>packages:</p>
  
  <pre><code>"react": "^16.8.6",
  "react-transition-group": "^4.0.1",
  </code></pre>
  
  <p>code snippet:</p>
  
  <pre><code>{ expanded &amp;&amp; (
      &lt;CSSTransition in={expanded} timeout={500} classNames="slide"&gt;
          &lt;div className="expandedDiv"&gt;&lt;/div&gt;
      &lt;/CSSTransition&gt;
  )}
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.slide-enter {
      transform: translateX(-100%);
      transition: .3s linear;
  }
  .slide-enter-active {
      transform: translateX(0%);
  }
  .slide-exit {
      transform: translateX(0%);
      transition: .3s linear;
  }
  .slide-exit-active {
      transform: translateX(-100%);
  }
  </code></pre>
  
  <p>structure:</p>
  
  <pre><code>+------------------------------+
  |      |          |  header    |
  |      |          |____________+
  |      |          |  content   |
  |      |          |            |
  |      |          |            |
  | nav  | expanded |            |
  |      |          |            |
  |      |          |            |
  |      |          |            |
  +------------------------------+
  </code></pre>
  
  <p>Expanded should slide in on true, and slide out on false, it is <code>expandedDiv</code> from the code snippet</p>
  
  <p>The div just pops in with no animation. Expected behaviour is a linear transition from left to right</p>
  
  <p>Thanks</p>