vue router 跳转动画

<template>
    <div id="app">
        <transition :name="SkipSwitchName">
            <router-view class="page" />
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {
            SkipSwitchName: ""
        };
    },
    watch: {
        $route(to, from) {
            if (to.meta.id > from.meta.id) {
                this.SkipSwitchName = "slide-left";
            } else {
                this.SkipSwitchName = "slide-right";
            }
        }
    }
};
</script>

<style>
.page {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    background-color: #ededed;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    will-change: transform;
    transition: all 250ms;
    position: absolute;
}
.slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
</style>

const routes = [
    // VueRouter
    {
        path: ‘/‘,
        name: ‘Login‘,
        component: () => import(‘../views/login‘),
        meta: {
            id: 1
        }
    },
    {
        path: ‘/home‘,
        name: ‘Home‘,
        component: () => import(‘../views/home‘),
        meta: {
            id: 2
        }
    },
    {
        path: ‘/transfer‘,
        name: ‘Tansfer‘,
        component: () => import(‘../views/transfer‘),
        meta: {
            id: 3
        }
    }
]