title: VueJs router-view transitions
body: <p>I am trying to create some transitions on my router-view components every time I click a new link. The problem is that only one of the fade animations will work. For example, it will fade out, but the new page will appear immediately like normal. Basically I can only have either an enter-active-class or a leave-active-class, but not both at the same time.</p>
  
  <pre><code>&lt;template&gt;
  
      &lt;div class="tom-layout"&gt;
          &lt;navBar class="z-depth-0"&gt;&lt;/navBar&gt;
          &lt;div class="content-layout"&gt;
              &lt;transition name="fade"&gt;
                  &lt;router-view&gt;&lt;/router-view&gt;
              &lt;/transition&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
      import NavBar from './components/NavBar.vue';
  
      export default {
          components: {
              navBar: NavBar
          }
      }
  
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
      @import url('https://fonts.googleapis.com/css?family=Ek+Mukta');
  
      body {
  
          overflow: hidden;
  
          .content-layout {
              margin-top: -64px;
              width: 100%;
              z-index: -5;
          }
      }   
  
  
  .fade-enter {
      opacity: 0;
  }
  
  .fade-enter-active {
      transition: opacity 2s ease;
  }
  
  .fade-leave {
  
  }
  
  .fade-leave-active {
      transition: opacity 2s ease;
      opacity: 0;
  }
  </code></pre>