VueJs路由器視圖轉換

我想在每次點擊新鏈接時在我的路由器視圖組件上創建一些轉換。問題是隻有一個淡入淡出動畫會起作用。例如，它會淡出，但新頁面將立即出現。基本上，我只能有一個積極進取的課程或一個離開活動課程，但不能同時進行。VueJs路由器視圖轉換

<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; 
}

來源

2017-02-23 TomMi DumMi

我只是用mode：out-in它似乎工作罰款：

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

請檢查工作fiddle。

來源

2017-02-23 06:26:00 Saurabh

謝謝。這解決了這個問題。我發現的另一個解決方案是將漸變延遲添加到.fade-enter-active，其延遲時間與轉換時間相同。 '.fade-enter-active { \t transition：opacity 0.25s ease; \t transition-delay：0.25s; }' –

VueJs路由器視圖轉換

回答

相關問題