VueJs राउटर-व्यू संक्रमण

Question

हर बार जब मैं एक नया लिंक क्लिक करता हूं तो मैं अपने राउटर-व्यू घटकों पर कुछ संक्रमण बनाने की कोशिश कर रहा हूं। समस्या यह है कि फीका एनिमेशन में से केवल एक ही काम करेगा। उदाहरण के लिए, यह फीका होगा, लेकिन नया पृष्ठ सामान्य की तरह तुरंत दिखाई देगा। असल में मैं केवल एक एंटर-एक्टिव-क्लास या अवकाश-सक्रिय-वर्ग हो सकता हूं, लेकिन दोनों एक ही समय में नहीं।

<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 की जाँच करें।