VueJs路由器视图转换

Question

每次单击新链接时,我都会尝试在路由器视图组件上创建一些转换.问题是只有一个淡入淡出动画会起作用.例如,它会淡出,但新页面会像平常一样立即出现.基本上我只能使用enter-active-class或leave-active-class,但不能同时使用.

<template>

    <div class="tom-layout">
        <navBar class="z-depth-0"></navBar>
        <div class="content-layout">
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </div>
    </div>

</template>

<script>
    import NavBar from './components/NavBar.vue';

    export default {
        components: {
            navBar: NavBar
        }
    }

</script>

<style lang="scss">
    @import url('https://fonts.googleapis.com/css?family=Ek+Mukta');

    body {

        overflow: hidden;

        .content-layout {
            margin-top: -64px;
            width: 100%;
            z-index: -5;
        }
    }   


.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    transition: opacity 2s ease;
}

.fade-leave {

}

.fade-leave-active {
    transition: opacity 2s ease;
    opacity: 0;
}

Answer 1

我只是使用模式:out-in它似乎工作正常:

  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>

请检查工作小提琴.