title: Vuejs sidemenu transition not working with position: fixed
body: <p>I have a sidebar component I would like to animate in and out with a transition. I am using transform translateX (see CSS below).</p>
  
  <p>However, the menu does not animate in properly. It works fine when I get rid of the <code>position: fixed</code> css property on the component, however, that leaves it not looking like much of a sidemenu (it is not properly positioned on the screen). With position fixed, it works except that the background color and position of the sidemenu div (and elements within it) aren't finalized until after the animation is over. </p>
  
  <p>So it looks gross. I've looked all over and found similar issues on here, but nothing that led me to a solution other than to use other peoples' pre-built components. (I would like to avoid doing that.) </p>
  
  <p>Here is my html (from parent component) in webpack's vue-loader:-</p>
  
  <pre><code>&lt;transition name="slide"&gt;
              &lt;app-menu   v-if="menuToggled" 
                          :untoggle="toggleSidebar"&gt;
              &lt;/app-menu&gt; 
          &lt;/transition&gt;
  </code></pre>
  
  <p>Here is the sidemenu's CSS for the div:</p>
  
  <pre><code>.menu {
          position: fixed; top: 0; left: 0; bottom: 0; right: 0; 
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          background-color: black; 
          padding: 10px;
          margin-right: 40px;
          text-align: center;
  }
  </code></pre>
  
  <p>Thanks! This is my first StackOverflow question. I hope I am not wasting anyone's time here. I very much appreciate constructive guidance of any form.</p>