Przejścia między routerami VueJs

Question

Próbuję utworzyć przejścia na moich składnikach widoku routera za każdym razem, gdy kliknę nowy link. Problem polega na tym, że zadziała tylko jedna z animacji. Na przykład zniknie, ale nowa strona pojawi się natychmiast, jak zwykle. Zasadniczo mogę mieć tylko klasę aktywną lub klasę aktywną, ale nie obie w tym samym czasie.

<template> 

    <div class="tom-layout"> 
     <navBar class="z-depth-0"></navBar> 
     <div class="content-layout"> 
      <transition name="fade"> 
       <router-view></router-view> 
      </transition> 
     </div> 
    </div> 

</template> 

<script> 
    import NavBar from './components/NavBar.vue'; 

    export default { 
     components: { 
      navBar: NavBar 
     } 
    } 

</script> 

<style lang="scss"> 
    @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; 
} 

Answer 1

jestem po prostu za pomocą mode: out-in wydaje działa dobrze z:

<transition name="fade" mode="out-in"> 
    <router-view></router-view> 
    </transition> 

Proszę sprawdzić pracę fiddle.