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

最新推荐文章于 2024-08-22 15:31:06 发布

qq_27717857

最新推荐文章于 2024-08-22 15:31:06 发布

阅读量4.5k

点赞数 1

分类专栏： Vue2.0

本文链接：https://blog.csdn.net/qq_27717857/article/details/86300924

版权

Vue2.0 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

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