Vue 跳转切换页面时左右滑动动画

最新推荐文章于 2022-10-11 16:01:24 发布

七锐.

最新推荐文章于 2022-10-11 16:01:24 发布

阅读量949

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue项目文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Glory_05/article/details/112985294

Vue项目专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js应用中利用Vue Router的meta信息定义页面层级，并通过监听路由变化来判断前进或后退状态，从而实现不同的页面过渡动画。具体实现包括在路由配置中设置meta属性，使用watch监听$router变化来判断路径层级，以及定义slide-left和slide-right过渡动画样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

  const routes = [
    {
      path: '/',
      name: 'search',
	  meta:{index:0},//meta对象的index用来定义当前路由的层级,由小到大,由低到高
      component: ()=> import('@/views/Search.vue')
    },
    {
      path: '/search2',
      name: 'search2',
	  meta:{index:1},
      component: ()=> import('@/views/Search2.vue')
    },
    {
      path: '/showlist',
      name: 'showlist',
	  meta:{index:3},
      component: ()=> import('@/views/ShowList.vue')
    }
  ]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2.监控路由跳转,判断切换页面之间的层级关系,并以此来判断路由前进或者后退

<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 (to.meta.index > from.meta.index) {
					//设置动画名称
					this.transitionName = 'slide-left';
				} else {
					this.transitionName = 'slide-right';
				}
			}
		}
	}
</script>

3.编写slide-left 和 slide-right 动画

<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>