title: vue.js - transition transform not working
body: <p>i am currently making my first site in vue.js. I want to translate my navbar in mobile devices to slide in and out on click. My code is working only when it comes to show element. It has smooth animation, but when it comes to slide out my navbar is just disappearing. I was trying all clases, leave-to, leave etc. I can't figure it out. 
  My child component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="menusite" v-if="active"&gt;
      &lt;ul&gt;
        &lt;li v-for="site in siteList" :key= "site.id"&gt;
          {{ site.name }}
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'menusite',
    props: {
      active: Boolean,
    },
    data() {
      return {
        siteList: [
          { name: 'O nas' },
          { name: 'Oferta' },
          { name: 'Realizacje' },
          { name: 'Kontakt' },
        ],
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>My parent component: </p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="navbar"&gt;
      &lt;img src="@/assets/burger.png" alt="burger" class="burger" @click="active=!active"&gt;
      &lt;NavbarLogo /&gt;
      &lt;transition name="slide"&gt;
        &lt;NavbarList :active="active" /&gt;
      &lt;/transition&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style lang="scss" scoped&gt;
    .navbar {
      width: 100%;
      background-color: white;
      transition: 1.5s;
      position: absolute;
      z-index: 4;
      .burger {
      height: 60px;
      position: absolute;
      right: 13px;
      top: 13px;
      z-index: 10;
      }
      .slide-leave-active, .slide-enter-active {
        transition: all .8s ease;
      }
      .slide-enter, .slide-leave-to {
        transform: translateX(-100%);
        opacity: 0;
      }
    }
  &lt;/style&gt;
  </code></pre>