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

我只是在使用 mode: out-in 它似乎可以正常工作：

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

请检查工作fiddle。

Answer 2

你可以尝试动态绑定路由转换：

<router-view :transition="$route.transition">
And set the data of transition from your route data

router.map({
  '/About': {
    component: { ... },
    transition: 'slide'
  }
})