title: Vue transitions and instant fade out of the component
body: <p>Currently when using transition in Vue I'm facing the problem that some of the components on the page disappear instantly whereas the rest fade out normally with the whole page.</p>
  
  <p>This is my transition set up as minimal reproducible example, is working  here <a href="https://codepen.io/pokepim/pen/rNVRZbL" rel="nofollow noreferrer">Codepen</a>
  You can see when switching from <code>Home</code> route to any other route the button disappears instantly while the rest of the view disappears according to the fade properties set using css (and vue transitions).</p>
  
  <pre class="lang-js prettyprint-override"><code>// https://github.com/groloop/vuejs-2-series
  Vue.use(Vuetify);
  Vue.use(VueRouter);
  
  var Home = {
    template: '&lt;div&gt; &lt;h2&gt;Home&lt;/h2&gt; &lt;v-tooltip left&gt; &lt;template v-slot:activator="{ on }"&gt; &lt;v-btn color="primary" dark v-on="on"&gt;Left&lt;/v-btn&gt; &lt;/template&gt; &lt;span&gt;Left tooltip&lt;/span&gt; &lt;/v-tooltip&gt; &lt;/div&gt;'
  }
  
  var AboutUs = {
    template: '&lt;h2&gt;About Us&lt;/h2&gt;'
  }
  
  var Contact = {
    template: '&lt;h2&gt;Contact&lt;/h2&gt;'
  }
  
  var NotFound = {
    template: '&lt;h2&gt;Not Found&lt;/h2&gt;'
  }
  
  
  var router = new VueRouter({
    history: false,
    routes: [
      { path: '/', name: 'home', component: Home },
      { path: '/about-us', name: 'about-us', component: AboutUs },
      { path: '/contact', name: 'contact', component: Contact },
      { path: '*', name: 'not-found', component: NotFound }
    ],
  });
  
  new Vue({
    el: '#app',
    router: router
  });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.fade-enter-active,
  .fade-leave-active {
    transition-duration: 0.5s;
    transition-property: opacity;
    transition-timing-function: ease-in;
  }
  
  .fade-enter-active {
    transition-delay: .5s;
  }
  
  .fade-enter,
  .fade-leave-active {
    opacity: 0
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;link href="https://unpkg.com/vuetify@1.5.16/dist/vuetify.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://unpkg.com/vue-router/dist/vue-router.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vuetify@1.5.16/dist/vuetify.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;v-toolbar&gt;
      &lt;v-toolbar-title&gt;TEST&lt;/v-toolbar-title&gt;
      &lt;v-spacer&gt;&lt;/v-spacer&gt;
      &lt;v-toolbar-items&gt;
        &lt;v-btn flat href="#/"&gt;Home&lt;/v-btn&gt;
        &lt;v-btn flat href='#/about-us'&gt;About us&lt;/v-btn&gt;
        &lt;v-btn flat href='#/contact'&gt;Contact&lt;/v-btn&gt;
        &lt;v-btn flat href='#/test'&gt;Test&lt;/v-btn&gt;
      &lt;/v-toolbar-items&gt;
    &lt;/v-toolbar&gt;
    &lt;transition name="fade" mode="out-in"&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/transition&gt;
  &lt;/div&gt;
  </code></pre>