Vue2.0 页面切换左右滑动效果

<transition :name="transitionName"  mode="out-in">
    	<router-view  class="child-view"></router-view>
    </transition>

data(){
  	return{
  		transitionName:'slide-left'
  	}
  },

 

watch:{
  	'$route' (to, from) {
　　　　	let isBack = this.$router.isBack;
        if( isBack ){
            this.transitionName = 'slide-right'
            this.$router.isBack = false;
        }else{
            this.transitionName = 'slide-left'
            this.$router.isBack = true;
        }
  	}
  }

.slide-left-enter,
.slide-right-leave-active {
    opacity: 0;
   transform: translate(10%, 0);
 }

.slide-left-leave-active,
.slide-right-enter {
     opacity: 0;
    transform: translate(-10% 0);
 }