title: CSS translation animation doesn't work when parent is shown
body: <p>There are similar questions like <a href="https://stackoverflow.com/questions/48656939/how-to-trigger-css-translate-animation-with-javascript">this</a> and <a href="https://stackoverflow.com/questions/4919963/css3-transform-not-working">this</a>, but don't address this situation.</p>
  
  <p>The goal is to slide a menu onto the screen with CSS translation when its parent is shown. However, showing the parent then applying the CSS class to trigger the translation happens instantly instead of over time. Effectively, there's no animation.</p>
  
  <p>JavaScript could be used to slide the child element onto the screen, but the goal is to keep as much of the animation logic in CSS.</p>
  
  <p>Setting the opacity to 0 doesn't work because we need the menu and its parent to not take any space or be part of the layout.</p>
  
  <p>Codepen: <a href="https://codepen.io/Crashalot/pen/YzXmjYj" rel="nofollow noreferrer">https://codepen.io/Crashalot/pen/YzXmjYj</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function toggleSidebar() {
    $("#sidebar").toggleClass("show");
  }
  
  
  $("#button").on("click", function() {
      toggleSidebar();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
  }
  
  #button {
    position: fixed;
    top: 0;
    left: 200px;
    width: 150px;
    height: 50px;
    background: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 8;
    cursor: pointer;
  }
  
  #sidebar {
    display: none;
  }
  
  #sidebar.show {
    display: block;
  }
  
  .overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: red;
    z-index: -1;
  }
  
  .menuBox {
    width: 200px;
    height: 100vh;
    background: blue;
   transition: 0.3s ease-in-out;           
    transform: translate(-100%);
  }
  
  #sidebar.show .menuBox {
    transform: translate(0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="sidebar"&gt;
    &lt;div class="overlay"&gt;&lt;/div&gt;
    &lt;div class="menuBox"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="button"&gt;CLICK ME&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>