VueRouter路由跳转实现过度动画-利用transition组件（cv即可）

话不多说直接上效果：

一：基础款

1.在app.vue中将一级路由出口使用transition标签包裹起来

// slide-left为过度样式--向左滑动
<transition name="slide-left">
      <router-view class="router-view" />
 </transition>

2.添加样式使其具备过渡效果

<style lang="less" scoped>
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

.router-view {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  height: 100%;
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  backface-visibility: hidden;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.van-badge--fixed {
  z-index: 1000;
}
</style>

这段代码直接加在系统默认生成的style标签下面即可

当然，大家肯定都希望路由跳转可以根据层级不同改变切换状态，比如从左到右与从右到左的不同状态，所以以此为思路，我们可以定义变量并监听路由跳转来实现不同切换效果的实现

二：进阶用法

1.上面的代码进行稍微改动，首先在data中定义变量来实现组件的状态进行动态切换

  data() {
    return {
      transitionName: 'slide-left'
    }
  },

2.将自定义值绑定到transition标签上进行动态绑定

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

3.同时通过watch监听路由跳转

  watch: {
    // 使用watch 监听$router的变化
    $route(to, from) {
      // 有主级到次级
      if (to.meta.index > from.meta.index) {
        this.transitionName = 'slide-left' // 向左滑动
      } else if (to.meta.index < from.meta.index) {
        // 由次级到主级
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = '' // 同级无过渡效果
      }
    }
  },

由此我们便可以实现上面的想法了

注：当然统计跳转没有效果是因为在我们使用vant组件库的tabbar组件时如果对其进行过度动画渲染会造成他在页面生成时会消失一两秒钟，暂时无法解决，如果您有什么建议欢迎留言和私信

如果文章对您有效记得点赞和收藏，谢谢😊