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


    	
    
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);
 }

 

 

你可能感兴趣的:(Vue2.0)