VueJS:在呈现新组件之前完成动态组件过渡 [英] VueJS: Complete dynamic component transition before rendering new component

问题描述

我使用VueJs的动态组件选项交换了一些组件.我在动态组件上设置了过渡.我的问题如下:-当前，如果更改当前视图(或组件)，则过渡效果开始(离开过渡)-过渡效果一开始，下一个视图/组件便开始其自身的过渡.本质上，两个过渡同时发生.我想要的是第一个组件的(离开)过渡在新组件的(输入)过渡开始之前完成.

I have some components that i swap out using VueJs's dynamic component option. I set up transitions on the dynamic component. My issue is as follows: -Currently, if a change the current view(or component) the transition effect starts(the leave transition) -As soon as the transition effect begins the next view/component starts its own transition. In essence, both transitions occur simultaneously. What i want is for the (leave) transition for the first component to complete before the (enter) transition for the new component begins.

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

推荐答案

mode ="out-in" 应该是您想要的.

mode="out-in" should be what you want.

这篇关于VueJS:在呈现新组件之前完成动态组件过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！