VueJsのルータービュー遷移

Question

新しいリンクをクリックするたびにルータービューコンポーネントにいくつかのトランジションを作成しようとしています。問題は、フェードアニメーションの1つのみが機能することです。たとえば、フェードアウトしますが、新しいページは通常のようにすぐに表示されます。基本的に私はenter-active-classまたはleave-active-classのどちらか一方しか持てませんが、同時に両方を持つことはできません。

<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

私はちょうどmodeを使用しています：out-inそれは微細な作業に思える：

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

fiddleの作業を確認してください。