vue页面切换项目实现转场动画的方法

2023-08-09 12:37:04 66

前言

移动端,使用vue为了良好的用户体验,会需要实现APP形式的切换页面的左滑和右滑效果

实现原理,vue的过渡&动画

技术栈:vue+vue-router

解决思路

区分前进和后退的路由

网上搜索的资料,找到了两种

监听popstate事件

window.addEventListener('popstate',function(e){
//用来判断是否是后退,在判断后需要在其他地方重置
router.isBack=true
},false)

在注册路由的时,添加meta对象(路由元信息)中添加索引,这样做就需要注意索引的大小(这里使用这一种方式)

{
path:"/login",
component:resolve=>require(["@/pages/login"],resolve),
meta:{
title:"登录",
keepAlive:false,
index:1
}
},
{
path:"/forward",
name:"Forward",
component:resolve=>require(["@/pages/forward"],resolve),
meta:{
title:"前进",
keepAlive:true,
index:2
}
},

根据切换方向设置不同的动画效果(通过给transtion内置组件不同的name选项)

方案

路由注册

{
path:"/login",
component:resolve=>require(["@/pages/login"],resolve),
meta:{
title:"登录",
keepAlive:false,//用来判断是否缓存,当判断为缓存时,则路由信息的name和组件的name选项需一致
index:1,//通过比较不同的索引,来判断是前进动画还是后退动画
}
},
{
path:"/forward",
name:"Forward",
component:resolve=>require(["@/pages/forward"],resolve),
meta:{
title:"前进",
keepAlive:true,
index:2
}
},

在App.vue(根组件)中,判断动画方向







.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active{
will-change:transform;
transition:all0.5s;

width:100vw;
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);
}

待解决问题

子路由问题

子路由还没有考虑到

缓存组件问题

使用上述方式,缓存组件需要注意组件的name选项要和路由的name选项一致,容易疏忽填写组件的name选项问题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue页面切换项目实现转场动画的方法

热门推荐

随机推荐