VueJS：渲染新组件前完成动态组件转换

Question

我有一些组件可以使用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> 

Answer 1

mode="out-in"应该是你想要的。

Answer 2

这可能不会完全解决它，但这可以减少转换重叠的影响。

您可以使用cubic-bezier函数来获得您的优势，方法是控制持续时间内转换快速的时间。

您可以在移出组件时使用ease-out CSS属性，因此转换将为：快速/突然开始，结束缓慢。在移动的组件上使用ease-in，因此转换将是：开始时较慢，结束时较快/突然，给予您整体效果。更多详情here。