title: Add transition to collapsable div using styled-components in React
body: <p>I am trying to create a simple collapsable div using styled-components in react.</p>
  
  <p>I can get the div to toggle open and close based on state but I cannot seem to get the transition to work. It just jumps to open or closed.</p>
  
  <p>Styled Component:</p>
  
  <pre><code>const Details = styled.div`
      transition: 0.3s ease-out;
  
      &amp;.open {
          height: auto;
          padding: 25px 0;
      }
  
      &amp;.closed {
          height: 0;
          overflow: hidden;
      }
  `;
  </code></pre>
  
  <p>JSX</p>
  
  <pre><code>&lt;Details className={this.state.detailsOpen ? 'open' : 'closed'}&gt;
      {stuff}
  &lt;/Details&gt;                
  </code></pre>