vue页面切换过渡transition

首先得有你想要的过渡效果css代码：

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

给你想要过渡页面的父元素给上这样的样式：

.router-view{
    width: 100%;
    position: absolute;
    -webkit-transition: all .3s cubic-bezier(.55,0,.1,1);
    -moz-transition: all .3s cubic-bezier(.55,0,.1,1);
    -ms-transition: all .3s cubic-bezier(.55,0,.1,1);
    -o-transition: all .3s cubic-bezier(.55,0,.1,1);
    transition: all .3s cubic-bezier(.55,0,.1,1);
    height:100%;
  }

html代码是这样的：

<template>
  <div id="app">
    <transition :name="transitionName">   
      <router-view class="router-view"></router-view>
    </transition>
  </div>
</template>

js代码是这样的：

export default {
	  name: 'app',
	  data(){
	    return {
	      transitionName:'vux-pop-in'
	    }
	  },
  }

这里的transitionName根据自己的需要去改变，我是监听路由去改变是vux-pop-in还是vux-pop-out的。

watch:{
    $route(to, from) {
      if(to.meta.index > from.meta.index){
        this.transitionName = 'vux-pop-in';
      }else{
        this.transitionName = 'vux-pop-out';
      }
    }
  }

这里当然要个路由这是参数index，分级。