文章來源：Vue-router結(jié)合transition實(shí)現(xiàn)app動(dòng)畫切換效果實(shí)例分享
VueRouter.prototype.goBack = function ()
{
this.isBack = true
window.history.go(-1)
}
<template>
<div id="rv">
<transition :name="transitionName">
<router-view class="Router"></router-view>
</transition>
</div>
</template>
<script>
export default
{
data()
{
var data =
{
transitionName: ""
}
return data;
},
watch:
{
$route()
{
var isBack = this.$router.isBack // 監(jiān)聽路由變化時(shí)的狀態(tài)為前進(jìn)還是后退
if(isBack)
{
this.transitionName = 'slide-right'
}
else if(this.$router.isBack != null)
{
this.transitionName = 'slide-left'
}
this.$router.isBack = false
}
}
}
</script>
<style>
#rv{
height: 100%;
}
.Router
{
position: absolute;
width: 100%;
transition: all ease 250ms;
}
.slide-left-enter,
.slide-right-leave-active
{
-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);
}
</style>
