Vue-router结合transition实现app动画切换效果
1、配置路由页面增加配置
给路由添加一个goBack方法。
import Vue from 'vue'
Router.prototype.isBack = true
Router.prototype.goBack = function () {
this.isBack = true
window.history.go(-1)
}
Vue.use(Router)
2、在路由页面监听路由变化(是前进还是后退)
<template>
<div id="app">
<transition :name="transitionName">
<router-view class="body-wrap"/>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
transitionName: 'slide-right'
}
},
watch: {
$route () {
let isBack = this.$router.isBack
if (isBack) {
this.transitionName = 'slide-right'
} else {
this.transitionName = 'slide-left'
}
this.$router.isBack = false
}
}
}
</script>
3、添加路由动画
<style>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active
will-change transform
transition all .3s
position absolute
.slide-right-enter
transform translate3d(-100%, 0, 0)
.slide-right-leave-active
transform translate3d(100%, 0, 0)
.slide-left-enter
transform translate3d(100%, 0, 0)
.slide-left-leave-active
transform translate3d(-100%, 0, 0)
</style>
4、路由前进的时候按正常方法走就行了。
5、后退的时候调用goBack方法就OK。
this.$router.goBack()