vue切换路由页面左右滑动过渡动画效果

在 app.vue文件中设置
HTML代码

<transition :name="transitionName">
	<router-view class="transitionBody"></router-view>
</transition>

JS代码

//设置动态name
data () {
    return {
      transitionName: 'transitionLeft',
    }
},
//控制左右滑动
 watch: {
    '$route'(to, from) {
        const arr = ['/shop-order', '/driver-info', '/shop-info', '/shopOrder-detail', '/change-password']
        this.transitionName = arr.indexOf(to.path) > arr.indexOf(from.path) ? 'transitionLeft' : 'transitionRight'
    }
}

//样式代码

.transitionBody{
 transition: all 0.4s ease-out;  //设置动画
}
.transitionLeft-enter,
.transitionRight-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0); 
}
.transitionLeft-leave-active,
.transitionRight-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.transitionLeft-enter-active,
.transitionRight-enter-active {  //防止过渡时元素抖动
  position: absolute;
  top: 0; 
  right: 0;
  left: 0;
  bottom: 0;
}