Vue仿淘宝路由切换动画(某些加动画,某些不加,跳转下一页面，前一个页面保持不动)

下面就来实现vue路由切换动画

在APP.vue里面

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

script

export default {
   data(){
      return {
          transitionName:''
      }
  },
  watch: {//使用watch 监听$router的变化
    $route(to, from) {
      if(to.path !=='/recommendMusic' && 
         to.path !=='/newsMV' && 
        (to.path !=='/searchMusic' || from.path =='/none') && 
         to.path !=='/newsMusic'){
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if(to.meta.index > from.meta.index){
	    //设置动画名称
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right'
      }
      }
      else{
        this.transitionName =""
      }
    }
  }
}

特别解释

  if(to.path !=='/recommendMusic' && 
	         to.path !=='/newsMV' && 
	        (to.path !=='/searchMusic' || from.path =='/none') && 
	         to.path !=='/newsMusic'){

这一段啥意思呢，就是我路由index.js定义的path路径嘛，就是下面那几个首页，熟人，+，消息的path地址，因为点击下面几个是不让它有动画效果的，所以加一个判断，from.path == ‘/none’,这个是当我从一个路由页面，返回到这个主页面的时候，由于我设置了主页面没有动画，但是我们想让它返回到这个页面的时候有动画，所以加一个||，’/none’就是我们要从这个页面跳转到主页面的路由地址，这样它返回主页的时候就有动画效果了，而且不影响下面4个路由的切换

css

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 300ms;
  position: absolute;
}
.slide-right-enter {
  transform: translate3d(-70%, 0, 0);
}
.slide-right-leave-active {
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  transform: translate3d(0, 0, 0);
}

路由index.js里面

   {
      path : '/none',
      component:none,
      meta:{index:2
      }
    },

效果我感觉跟淘宝切换效果差不多了，点击详情页，详情页从右往左进入页面，并且当前页面保持固定，当返回时候，详情页再从左往右返回,下面几个切换的demo也没设置动画效果