vue路由切换动画,前进左滑,后退右滑
2019-01-10 17:54
851 查看
版权声明:本文为本人原创文章,如需转载请附上原文地址。 https://blog.csdn.net/qq_33081841/article/details/86244689
一、目标
实现原生app页面切换动画。前进左滑后退右滑,同级tab切换无动画
二、分析
1、如何判断页面是前进还是后退?
2、如何在前进后退时使用不同的动画?
三、思路
1、为每个页面定义一个变量来表示当前所在的层级(比如:A -> B -> C ,A的层级为1,B的层级为2,C的层级为3)
2、在页面每次切换时判断当前显示的页面和即将显示的页面的层级关系,即可知道是前进还是后退(例如: A -> B,判断A页面与B页面层级关系,如果A页面层级小于B页面则为前进,反之为后退)。
3、利用vue导航守卫判断层级关系,动态的改变路由动画,(即改变变量transform,transform为一个全局变量,见代码)
四、实现
路由文件,自定义tree为当前页面的层级
ps:目前不能使用keep-avail标签缓存,会导致动画效果不对
[code]const routers=[ { path: '/test', name: 'test', //财务查询页 component: resolve => require(['@/page/test/test'], resolve), meta:{ title : '测试页', // 标题设置在这里 tree: 4, } }, { path: '/list1', name: 'list1', //财务查询页 component: resolve => require(['@/page/test/list1'], resolve), meta:{ title : '测试页', // 标题设置在这里 tree: 1, } }, { path: '/list2', name: 'list2', //财务查询页 component: resolve => require(['@/page/test/list2'], resolve), meta:{ title : '测试页', // 标题设置在这里 tree: 2, } }, { path: '/list3', name: 'list3', //财务查询页 component: resolve => require(['@/page/test/list3'], resolve), meta:{ title : '测试页', // 标题设置在这里 tree: 3, } }, ] export default routers;
导航守卫
[code]//路由跳转前进后退动画,Vue原型上定义transition为动画效果 router.beforeEach ( (to, from, next) => { Vue.prototype.transition = 'slide-none'; if(from.meta.tree > to.meta.tree) { // 后退,想右滑动 Vue.prototype.transition = 'slide-right'; from.meta.keepAlive = false; to.meta.keepAlive = true; } else if(from.meta.tree < to.meta.tree) { // 前进,想左滑动 Vue.prototype.transition = 'slide-left'; from.meta.keepAlive = true; to.meta.keepAlive = false; }else { // 同一层级,无动画 Vue.prototype.transition = 'slide-none'; from.meta.keepAlive = true; to.meta.keepAlive = true; } next(); })
app.vue模板标签
[code]<div id='app'> <transition :name='transition'> <router-view v-wechat-title='$route.meta.title'></router-view> </transition> </div>
css动画样式
[code]/*向左滑动*/ @keyframes slideInLeft { from { transform: translate3d(100%, 0, 0); position: fixed; top: 0; left: 0; opacity: 1; } to { transform: translate3d(0, 0, 0); position: fixed; top: 0; left: 0; opacity: 1; } } @keyframes slideInRight { from { transform: translate3d(0%, 0, 0); position: fixed; top: 0; left: 0; opacity: 1; } to { transform: translate3d(-100%, 0, 0); position: fixed; top: 0; left: 0; opacity: 1; } } .slide-left-enter-active{ position: fixed; top: 0; left: 0%; width: 100vw; height: 100vh; animation: slideInLeft 1s linear forwards; } .slide-left-leave-active{ position: fixed; top: 0; left: 0%; width: 100vw; height: 100vh; animation: slideInRight 1s linear forwards; } /*向右滑动*/ @keyframes slideOutLeft { from { transform: translate3d(-100%, 0, 0); position: fixed; top: 0; left: 0; opacity: 1; } to { transform: translate3d(0%, 0, 0); position: fixed; top: 0; left: 0; opacity: 1; } } @keyframes slideOutRight { from { transform: translate3d(0%, 0, 0); position: fixed; top: 0; left: 0; opacity: 1; } to { transform: translate3d(100%, 0, 0); position: fixed; top: 0; left: 0; opacity: 1; } } .slide-right-enter-active{ position: fixed; top: 0; left: 0%; width: 100vw; height: 100vh; animation: slideOutLeft 1s linear forwards; } .slide-right-leave-active{ position: fixed; top: 0; left: 0%; width: 100vw; height: 100vh; animation: slideOutRight 1s linear forwards; }
上一篇 : Vue SPA 实现类似App前进刷新后退不刷新
下一篇:在github上在线演示项目
相关文章推荐
- Vue-router结合transition实现app前进后退动画切换效果
- vue路由前进后退动画效果的实现代码
- Vue-router结合transition实现app前进后退动画切换效果
- Vue-router结合transition实现app前进后退动画切换效果的实例
- 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
- vue路由前进刷新后退不刷新
- vue中路由前进到某个页面,后退再前进,页面不刷新问题
- vue路由切换动画
- vue中路由切换动画效果(transition)
- ajax无刷新页面切换,历史记录后退前进解决方案
- vue实现循环切换动画
- vue2.0路由切换后页面滚动位置不变BUG
- vue实现app页面切换动画效果实例
- 基于vue-router的页面切换动画
- Vue.js实现微信过渡动画左右切换效果
- Vue 路由切换时页面内容没有重新加载的解决方法
- Android Activity切换动画(解决back键后退失效问题)
- vue基础动态路由,嵌套路由router-link切换
- vue-router同一路由地址同页面切换无效解决
- (六)vue开发 - transition之页面切换过渡动画