Vue-router combined with transition to achieve app forward and rewind animation transitions

First, configure the route and modify the routing configuration

The routing configuration is out of the story.
Focus, add a GoBack method to Vueroute to record the forward and backward state of the route This.isback = True

VueRouter.prototype.goBack = function () {
This.isback = True
Window.history.go (-1)
}

two. Listen for routing changes (determine if the route status at this time is forward or backward when routing changes)

<template>
<div>

Dynamically bound route animations, depending on the routing state of different binding different route animations are: ' Slide-left ' and ' slide-right '

<transition:name= "Transitionname" >
<router-view class= "Router" ></router-view>
</transition>
</div>
</template>

<script>
Export Default {
Data () {
return {
Transitionname: ' slide-right '//default dynamic route changed to Slide-right
}
},
Watch: {
' $route ' (to, from) {
Let Isback = this. $router. Isback//Monitor the status of the route change to forward or backward
if (isback) {
This.transitionname = ' Slide-right '
} else {
This.transitionname = ' Slide-left '
}
this. $router. Isback = False
}
}
}
</script> Three, to the forward and backward animation to add different animation effects, the specific code is as follows:

<style>

. Router {
Position:absolute;
width:100%;
Transition:all. 8s Ease;
top:40px;
}

. 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);
}
</style>

Four, the route forward by the normal way to go on the line; Five, back when the call GoBack method is OK;