vue路由切换动画效果

最新推荐文章于 2024-07-15 16:07:57 发布

技术项目经理

最新推荐文章于 2024-07-15 16:07:57 发布

阅读量393

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43837268/article/details/116517521

版权

vue 专栏收录该内容

192 篇文章 4 订阅

订阅专栏

本文介绍了如何在Vue Router的beforeRouteEnter钩子中，为每个路由元信息添加一个实时的时间戳，以便根据进入页面的顺序控制过渡动画。通过watch监听路由变化，动态更新meta.enterpagetimestamp。

摘要由CSDN通过智能技术生成

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>