vue-router实现webapp切换效果
演示效果
快速集成
1.复制pagetransittion.vue到项目目录。2.修改router配置。
router.prototype.goback = function () { this.isback = true window.history.go(-1) } const router = new router({ routes: [ { path: '/', name: 'pagetransition', component: pagetransition, // 引入页面切换组件 children: [{ path: '', component: index // 父路由访问页面,例如,访问www.aaa.com/ 显示的是index组件 }, { path: '/pagea', component: pagea // 子路由组件 例如,访问www.aaa.com/pagea 显示为pagea }, { path: '/pageb', component: pageb // 子路由组件 例如,访问www.aaa.com/pageb 显示为pageb }] } ] })
方案实现
记录页面状态
要实现页面前进后台动画,首先必须知道页面状态(即是页面是进入下一页,还是后退),我们可以通过改写router.go方法记录回退状态,页面如果需要回退时,调用
$router.go(-1)
修改router/index.vue
// 增强原方法,好处是旧的业务模块不需要任何变动 router.prototype.go = function () { this.isback = true window.history.go(-1) } // 或者你可以新建一个方法 router.prototype.goback = function () { this.isback = true this.go(-1) }
当new router时,实例就包含go/goback方法。
监听路由变化
使用嵌套路由的方式引入子页面,监听根路由的update钩子做相应操作。
beforerouteupdate (to, from, next) { // 如果isback为true时,证明是用户点击了回退,执行slide-right动画 let isback = this.$router.isback if (isback) { this.transitionname = 'slide-right' } else { this.transitionname = 'slide-left' } // 做完回退动画后,要设置成前进动画,否则下次打开页面动画将还是回退 this.$router.isback = false next() }
动画效果
通过transition执行动画
<transition :name="transitionname"> <router-view class="child-view"></router-view> </transition>
css代码
.child-view { position: absolute; width:100%; transition: all .8s cubic-bezier(.55,0,.1,1); } .slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate(50px, 0); transform: translate(50px, 0); } .slide-left-leave-active, .slide-right-enter { opacity: 0; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0); }
路由设置
router/index.js
const router = new router({ routes: [ { path: '/', name: 'pagetransition', component: pagetransition, children: [{ // 该路由为父路由的默认路由 path: '', component: index }, { path: '/pagea', component: pagea }, { path: '/pageb', component: pageb }] } ] })
github地址:https://github.com/zhengguorong/pageainimate
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
Vue引入echarts报错Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
蒲公英 · JELLY技术周刊 Vol.14: Vue 3 新特性详解
keepalived+haproxy+mycat+mysql高可用搭建配制
网友评论