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路由器视图转换

回答

相关问题