Vue-router结合transition来实现app前进后退动画切换效果
(1)、首先配置路由并且修改路由配置给VueRoute添加一个goBack方法,用于记录路由的前进后退状态 this.isBack = true在main.js里面 绑定一个goBack方法(2)、监听路由变化(在路由变化时判断此时的路由状态是前进还是后退)动态绑定路由动画,根据路由状态的不同绑定不同的路由动画分别为 :‘slide-left’ 和 'slide-right'在App.vue文件中
·
-
(1)、首先配置路由并且修改路由配置
给VueRoute添加一个goBack方法,用于记录路由的前进后退状态 this.isBack = true
在main.js里面 绑定一个goBack方法
-
(2)、监听路由变化(在路由变化时判断此时的路由状态是前进还是后退)
动态绑定路由动画,根据路由状态的不同绑定不同的路由动画分别为 :‘slide-left’ 和 'slide-right'
在App.vue文件中
<template>
<div id="app">
<transition :name="transitionName">
<router-view></router-view>
</transition>
</div>
</template>
export default {
data() {
return {
transitionName: ''
}
},
watch: {
'$route' (to, from) {
let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
if (isBack) {
this.transitionName = 'slide-left'
this.$router.isBack = false
} else {
this.transitionName = 'slide-right'
this.$router.isBack = true
}
}
}
}
-
(3)、前进后退动画添加不同的动画效果的css如下:
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 500ms;
position: absolute;
}
.slide-right-enter {
opacity: 0;
transform: translateX(-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%);
}
(4)、由于go(-1)和router.push()会有一些左滑右滑的不统一问题,解决办法如下(在main.js中)
window.onload = function () {
window.addEventListener('popstate', function (e) {
router.isBack = true
}, false)
}
更多推荐
已为社区贡献2条内容
所有评论(0)