vue-router配合transition完成路由切换动画

基本情况下在app.vue入口文件加上这个就行了。

<transition name="scale" mode="out-in">
   <router-view></router-view>
</transition>

但在新版vuerouter需要更改下

<router-view v-slot="{ Component }">
  <transition name="scale" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

这里提一下transition中的mode属性：
mode为过度模式，
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

第一种淡出淡入效果：

// 淡出淡入
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

第二种滑动效果：

// 滑动
.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s ease-out;
}
.slide-enter-to {
  position: absolute;
  right: 0;
}
.slide-enter {
  position: absolute;
  right: -100%;
}
.slide-leave-to {
  position: absolute;
  left: -100%;
}
.slide-leave {
  position: absolute;
  left: 0;
}
// 设置滑动过渡必须给每个组件设定宽度
.wrapper {
  width: 100%;
  // min-height: 100vh;
  // background: chartreuse;
}

第三种缩放效果：

// 缩放
.scale-enter-active,
.scale-leave-active {
  transition: all 0.5s ease;
}
.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

更多效果可参考：

https://segmentfault.com/a/1190000040935668

另：
可通过监听$route来控制滑动滑动的滑动方向，动态赋值给transition中的动画名称。

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