title: Making a slide down menu
body: <p>I am making a slide down menu, but it just jumps to its intended height, with no transition. Can anyone point me in the right direction?</p>
  <pre><code>const Container = styled.section`
    position: relative;
    overflow: hidden;
  `
  
  const WrapperItems = styled.div`
    padding-left: 2rem;
    user-select: none;
    transition: all 1s ease-in-out;
    position: relative;
    height: 0;
  
    &amp;.active {
      max-height: 100vh;
      height: auto;
    }
  
  return (
      &lt;Container&gt;
        &lt;Wrapper onClick={() =&gt; setIsOpen(!isOpen)}&gt;
          &lt;div className=&quot;title&quot;&gt;{title}&lt;/div&gt;
  
        &lt;/Wrapper&gt;
        &lt;WrapperItems className={isOpen ? &quot;active&quot; : &quot;&quot;}&gt;
          {items.map(item =&gt; (
            &lt;div className=&quot;item&quot; onClick={() =&gt; navigate(item.to)}&gt;{item.title}&lt;/div&gt;
          ))}
        &lt;/WrapperItems&gt;
      &lt;/Container&gt;
    );
  </code></pre>