Vue 路由动画最优解决方案（进入-左滑动画，返回-右滑动画）。通过给页面保存一个时间戳来判断事进入还是返回

通过给页面保存一个时间戳来判断事进入还是返回

1.常见的方式还有通过vue router 的meta来保存一个值，通过判断to和fofrom中这个值的大小来判断动画的方式

这个方案的缺点是 meta里的值配置麻烦，而且也不能完全准确的判断对

2.通过路由名称判断（如：/app 和 /app/details）来确定是进入还是返回

这个方案也存在缺陷，就是必须要依赖于路由的命名规范，所以也不推荐

3.通过吧vm.$router.push 和 vm.$router.back 再次封装方式来处理

这种方式的缺点是系统的返回就不能判断动画的展示的方式

在app.vue中

<template>
    <div id="app">
        <transition :name="animate">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>

export default {
    name: 'App',
    data() {
        return {
            animate: 'slide-right',
        };
    },
    watch: {
        // 路由动画 
        $route(to, from) {
            if (typeof to.meta._t == 'undefined') {
                to.meta._t = new Date().getTime().toString();
            }
            if (parseInt(to.meta._t) < parseInt(from.meta._t)) {
                this.animate = 'slide-left';
            } else {
                this.animate = 'slide-right';
            }
        },
    },
};
</script>

<style>
/* 过渡动画 */
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
    will-change: transform;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    width: 100%;
    height: 100%;
    position: fixed;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.slide-right-enter,
.slide-left-leave-active {
    opacity: 0;
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
}
.slide-right-leave-active,
.slide-left-enter {
    opacity: 0;
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
}
</style>