VueJS：渲染新組件前完成動態組件轉換

我有一些組件可以使用VueJs的動態組件選項進行轉換。我在動態組件上設置了轉換。我的問題如下： - 當前，如果更改當前視圖（或組件），轉換效果開始（離開轉換） - 轉換效果開始時，下一個視圖/組件開始自己的轉換。實質上，兩個轉換同時發生。我想要的是在新組件的（輸入）轉換開始之前完成第一個組件的（離開）轉換。VueJS：渲染新組件前完成動態組件轉換

<template> 
    <div id="app"> 
     <div>Current page: {{currentView}}</div> 
     <img src="./assets/logo.png"> 
     <transition name="fade"> 
      <component @stateCPchanged="changeView" v-bind:is="currentView"></component> 
     </transition> 
    </div> 
</template> 

<script> 
    import numberPage from './components/NumberPage.vue' 
    import otpPage from './components/OtpPage.vue' 
    import redirectPage from './components/RedirectPage.vue' 
    import state from './state.js' 
    export default { 
     data() { 
      return { 
       currentView: state.currentPage 
      } 
     }, 
     components: { 
      numberPage: numberPage, 
      otpPage: otpPage, 
      redirectPage: redirectPage 
     }, 
     methods: { 
      changeView() { 
       this.currentView = state.currentPage 
      } 
     } 
    } 
</script> 

<style> 
    .fade-enter-active { 
     transition: all 0.4s 
    } 
    .fade-enter { 
     opacity: 0; 
     margin-left: 90px; 
    } 
    .fade-leave-active { 
     transition: all 0.4s; 
     opacity: 0; 
     margin-left: -100px; 
    } 
</style>

來源

2016-11-20 Gilbert Nwaiwu