title: My vuejs animation/transition is lagging on path change.
body: <p><a href="https://i.stack.imgur.com/OWYsh.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OWYsh.gif" alt="enter image description here"></a></p>
  
  <p>I am using vue and vue-router for my portfolio. I added simple "fade" animation. And my animation is lagging. </p>
  
  <p><strong>My App.vue component:</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app"&gt;
          &lt;Square/&gt;
          &lt;Navbar/&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>My Square.vue component:</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="square"&gt;
          &lt;transition name="fade"&gt;
              &lt;router-view&gt;&lt;/router-view&gt;
          &lt;/transition&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;style&gt;
      .fade-enter-active, .fade-leave-active {
        transition: opacity 0.5s;
      }
      .fade-enter, .fade-leave-to{
        opacity: 0;
      }
   &lt;/style&gt;
  </code></pre>
  
  <p><strong>My routes file:</strong></p>
  
  <pre><code>import Vue from 'vue';
  import Router from 'vue-router';
  import Hello from './views/Hello.vue';
  
  Vue.use(Router);
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'hello',
        component: Hello,
      },
      {
        path: '/i-am',
        name: 'I am',
        component: () =&gt; import( 
  './views/About.vue'),
      },
      {
        path: '/i-use',
        name: 'I use',
        component: () =&gt; import( 
  './views/Using.vue'),
      },
     ],
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/jk5H2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jk5H2.png" alt="This is project structure"></a></p>
  
  <p>And I think it is not because of the style of animation. New content renders faster than old component destroys. </p>