title: Vue Transition to popup menu
body: <p>I have a Vue project where I try to learn how to use Vue and Vue transitions. One of the things I am trying out is how to create a popup menu which sits at the bottom of sidebar.</p>
  <p>When closed the menu just shows just the usericon, username and the an arrow. This arrow should move be down when the menu is closed. When the menu is opened this image should rotate 180 degrees. But the image stays in the open position from the starts and never rotates when the menu is opened or closed.</p>
  <p><a href="https://i.stack.imgur.com/sjqEz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sjqEz.png" alt="enter image description here" /></a></p>
  <pre><code>.rotatingImage {
    -webkit-transition: -webkit-transform 0.8s ease-in-out;
    transition: transform 0.8s ease-in-out;
  }
  
  .rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  </code></pre>
  <p>When the menu is opened the submenu's that are hidden should hover in from the bottom of the screen. But These items keep on coming in from the right. Even tough I declared them to come in from the bottom by <code>transform: translateY(0)</code> and <code>transform: translateY(10rem)</code>.</p>
  <p><a href="https://i.stack.imgur.com/1vIZk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1vIZk.png" alt="enter image description here" /></a></p>
  <pre><code>.slide-enter-active,
  .slide-leave-active {
    transition: 0.4s;
    transform: translateY(0);
  }
  
  .slide-enter,
  .slide-leave-to {
    transform: translateY(10rem);
  }
  </code></pre>
  <pre><code>    &lt;div class=&quot;mt-auto&quot;&gt;
        &lt;div
          class=&quot;w-full flex p-3 cursor-pointer border-t-1 border-b-1 border-blue-sidebarBorder&quot;
          @click=&quot;swapUserMenuOpened&quot;
        &gt;
          &lt;img
            src=&quot;@/assets/img/sidebar/user.svg&quot;
            alt=&quot;userIcon&quot;
            class=&quot;mr-3 w-5&quot;
          /&gt;
          &lt;p class=&quot;text-lg&quot;&gt;{{ userName }}&lt;/p&gt;
          //THIS IS THE IMG THAT SHOULD ROTATE
          &lt;img
            src=&quot;@/assets/img/sidebar/arrowDown.svg&quot;
            alt=&quot;userIcon&quot;
            class=&quot;mr-3 w-3 ml-auto rotatingImage&quot;
            :class=&quot;{ rotate: swapUserMenuOpened }&quot;
          /&gt;
        &lt;/div&gt;
        &lt;transition name=&quot;slide&quot;&gt;
          &lt;div v-if=&quot;userMenuOpened&quot;&gt;
            &lt;router-link
              v-for=&quot;item in menuItems&quot;
              :key=&quot;item.title&quot;
              class=&quot;flex items-center pl-3 cursor-pointer hover-item h-14 transparentBorder mb-0.5&quot;
              :to=&quot;item.link&quot;
            &gt;
              &lt;img
                v-bind:src=&quot;require(`@/assets/img/sidebar/${item.icon}`)&quot;
                v-bind:alt=&quot;item.icon&quot;
                class=&quot;mr-3 w-4&quot;
              /&gt;
              &lt;p&gt;{{ item.title }}&lt;/p&gt;
            &lt;/router-link&gt;
          &lt;/div&gt;
        &lt;/transition&gt;
      &lt;/div&gt;
  </code></pre>