VueJs yönlendirici görünüm geçişleri

Question

Yeni bağlantıyı her tıklattığımda yönlendirici görünüm bileşenlerinde bazı geçişler oluşturmaya çalışıyorum. Sorun şu ki, animasyonlardan sadece biri çalışacak. Örneğin, sönecektir, ancak yeni sayfa hemen normal gibi görünecektir. Temel olarak, sadece bir giriş-aktif sınıfa ya da izin-aktif sınıfa sahip olabilirim, fakat her ikisinde de aynı anda değil. Sadece mode kullanıyorum

<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

: out-in onunla iyi çalışıyor gibi görünüyor:

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

fiddle çalışma kontrol edin.