vue路由切换动画效果

router.js【路由守卫在元信息上加入时间戳】

beforeRouteEnter (to, from, next) {
            next(vm => {
                if(to.name=='root'){
                    for (const key in routeData) {
                        routeData[key].meta?
                        routeData[key].meta.enterpagetimestamp=null:
                        routeData[key].meta={
                            enterpagetimestamp:null
                        };
                    }
                    to.meta.enterpagetimestamp=Date.parse(new Date());
                }else{
                    to.meta?to.meta:to.meta={}
                    to.meta.enterpagetimestamp=to.meta.enterpagetimestamp?to.meta.enterpagetimestamp:Date.parse(new Date());
                }
            });
        },

app.vue 

<template>
    <div>
        <transition :name="transitionName">
            <router-view></router-view>
        </transition>
        
    </div>
</template>

<script>
    export default {
        data() {
            return {
                transitionName: ''
            }
        },
        watch: { //使用watch 监听$router的变化
            $route(to, from) {
                //如果to索引大于from索引,判断为前进状态,反之则为后退状态
				if (this.$route.meta.enterpagetimestamp?this.$route.meta.enterpagetimestamp>from.meta.enterpagetimestamp:true) {
					//设置动画名称
					this.transitionName = 'slide-left';
				} else {
					this.transitionName = 'slide-right';
				}
            }
        }
    }
</script>


<style>
    .slide-right-enter-active,
	.slide-right-leave-active,
	.slide-left-enter-active,
	.slide-left-leave-active {
		will-change: transform;
		transition: all 500ms;
		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>