参考文章
1.在路由对象的原型中添加一个方法和一个属性
Router.prototype.goBack = function () {
//也可以用下面注释的那种写法,this指向的就是Router.prototype
//设置isBack为真让组件动画向右
this.isBack = true
window.history.go(-1)
}
//Router.prototype.isBack=true
2.到要应用切换动画的roter-view中添加渐变动画
<transition :name="transitionName">
<router-view class="Router"/>
</transition>
2.1.在style标签中添加样式
.Router {
transition: all 5s ease;
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100% 0);
}
3.在router-view所在组件中增加一个data属性
return {
transitionName: 'slide-right' // 默认动态路由变化为slide-right
}
4.在rotuer-view所在组件监听路由切换
$route (to, from) {
let isBack = this.$router.isBack//监听路由变化时的状态为前进还是后退
if(isBack) {
//向右后退
this.transitionName = 'slide-right'
} else {
//向左前进
this.transitionName = 'slide-left'
}
this.$router.isBack = false
}
5.后退向右滑动
调用前面定义好的goBack方法,改变切换动画状态向右,和返回上一页
goBack(){
this.$router.goBack()
}
nice,请注意$route
和$router
6.注意事项
在使用转场动画时,正在进行转换动画播放过程中,新的组件和旧的组件dom都存在,就是说在指定动画的时间内旧dom还是存在的,如果你两个组件有重名的id,你的代码逻辑可能处理到旧的dom中了。