百变鹏仔-专注前端行业精选
vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
作者:鹏仔先生日期:2024-04-16 11:11:49浏览:1442分类:JavaScript
Hello,大家好,我是小编鹏仔,鹏仔一直觉得VUE在H5端路由跳转时交互特别丑,一直想写成那种点击滑动切换类的效果,趁着这两天工作不是很忙就网上搜了下,最终在多个搜索结果中选择了一种方式实现,效果如下图所示,点击路由跳转时是页面是滑动切换。
逻辑其实还是很简单的,就是监听在路由切换时加css效果即可,下方跟着鹏仔来一步一步的去添加实现吧!
首先,我们在router.js中,给每个要切换的路由meta中加index索引,用来判断页面动画的方向(页面在返回或者跳转判断向右滑动还是向左滑动方向,简单理解为上下页区分吧)。
{ path: '/feedbackList', name: 'feedbackList', component: () => import('../views/teacher/feedbackList/index'), meta:{ title: "反馈列表", index: 1 } }, { path: '/feedbackRecordList', name: 'feedbackRecordList', component: () => import('../views/teacher/feedbackList/record'), meta:{ title: "记录列表", index: 2 } }, { path: '/feedbackRecordDetails', name: 'feedbackRecordDetails', component: () => import('../views/teacher/feedbackList/details'), meta:{ title: "记录详情", index: 3 } }
接着,我们打开 App.vue 页面
将
<router-view />
修改为
<transition :name="transitionName"> <router-view /> </transition>
在data中定义
data() { return { transitionName: "", }; }
在watch中监听路由跳转时修改name
watch:{ $route(to,from){ //实现路由跳转动画 if (to.meta.index > from.meta.index) this.transitionName = "slide-left"; if (to.meta.index < from.meta.index) this.transitionName = "slide-right"; } }
最后在css中添加样式,即可实现
.slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active { will-change: transform; transition: all .5s; position: absolute; } .slide-right-enter { opacity: 0; transform: translate(-100%); } .slide-right-leave-active { opacity: 0; transform: translateX(100%); } .slide-left-enter { opacity: 0; transform: translateX(100%); } .slide-left-leave-active { opacity: 0; transform: translateX(-100%); }
这个切换是使用了css的位移属性,如果您时间够闲,可以改为 渐变 旋转 缩放 等花里胡哨的效果(https://www.sharedbk.com/post/131.html)。
下方为完整的App.vue页面的代码
<template> <div id="app"> <transition :name="transitionName"> <router-view /> </transition> </div> </template> <script> export default { name: 'App', data() { return { transitionName: "", }; }, methods: { }, components: { }, watch:{ $route(to,from){ //实现路由跳转动画 if (to.meta.index > from.meta.index) this.transitionName = "slide-left"; if (to.meta.index < from.meta.index) this.transitionName = "slide-right"; } } } </script> <style> #app { height: 100%; min-height: 100%; } /* 路由页面跳转交互 */ .slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active { will-change: transform; transition: all .5s; position: absolute; } .slide-right-enter { opacity: 0; transform: translate(-100%); } .slide-right-leave-active { opacity: 0; transform: translateX(100%); } .slide-left-enter { opacity: 0; transform: translateX(100%); } .slide-left-leave-active { opacity: 0; transform: translateX(-100%); } </style>
鹏仔扩展
<transition name=""></transition>
v-enter:进入(显示)开始时的状态
v-enter-active:进入(显示)过程中的状态
v-enter-to:进入(显示)结束时的状态
v-leave:离开(隐藏)开始时的状态
v-leave-active:离开(隐藏)过程中的状态
v-leave-to:离开(隐藏)结束时的状态
手机扫码访问
猜你还喜欢
- 11-01 vue中实现代码高亮
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 07-02 微信小程序判断是安卓还是苹果
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 06-25 uniapp页面跳转的几种方式
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 02-22 VUE You are using the runtime-only build of Vue where the template compiler is not available. Either
已有1位网友发表了看法:
天天下载(www.ttzip.com) 评论于 [2024-06-16 22:28:18] 回复
感谢分享