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。

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

2 个答案: