VueJS：在渲染新组件之前完成动态组件转换答案

【问题标题】：VueJS: Complete dynamic component transition before rendering new componentVueJS：在渲染新组件之前完成动态组件转换
【发布时间】：2017-04-04 05:44:28
【问题描述】：

我有一些使用 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>

【问题讨论】：

标签： css vue.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

这可能无法完全解决，但可以减少过渡重叠的影响。

您可以使用cubic-bezier 函数来发挥自己的优势，方法是控制在持续时间内何时快速转换。

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

【讨论】：