Vue路由跳转动画

1.App.vue中添加

　　<transition :name="animate">
　　　　<router-view/>
　　</transition>

export default {
name: 'App',
data(){
　　return{
　　　　animate: ""
　　}
},
watch: {
　　$route(to, from) {
　　　　if (to.meta.tx > from.meta.tx) {
　　　　this.animate= "right";
　　　} else {
　　　　this.animate= "left";
　　　　}
　　}
　　}
}

<style>
　　.right-enter-active,
　　.right-leave-active,
　　.left-enter-active,
　　.left-leave-active {
　　　　transition: all 200ms;
　　}
　　.right-enter {
　　　　transform: translate3d(-100%, 0, 0);
　　}
　　.right-leave-to {
　　　　transform: translate3d(100%, 0, 0);
　　}
　　.left-enter {
　　　　transform: translate3d(100%, 0, 0);
　　}
　　.left-leave-to {
　　　　transform: translate3d(-100%, 0, 0);
　　}

</style>