vue-router过渡动效

过渡动画我们使用vue官方提供的方法 transition 来实现，他的属性有 name(过渡动画名) ， mode(过渡模式) ，只有 out-in 和 in-out 两种模式。下面直接上代码。

Vue2版本

v3(vue2)官方文档

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

.scale-enter {
  transform: scale(0.9);
  opacity: 0;
}
.scale-enter-active,
.scale-leave-active {
  transition: 0.3s ease-out;
}
.scale-enter-to {
  transform: scale(1);
  opacity: 1;
}
.scale-leave {
  transform: scale(1);
  opacity: 1;
}
.scale-leave-to {
  transform: scale(0.9);
  opacity: 0;
}

Vue3版本

v4(vue3)官方文档

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

.scale-enter {
  transform: scale(0.9);
  opacity: 0;
}
.scale-enter-active,
.scale-leave-active {
  transition: 0.3s ease-out;
}
.scale-enter-to {
  transform: scale(1);
  opacity: 1;
}
.scale-leave {
  transform: scale(1);
  opacity: 1;
}
.scale-leave-to {
  transform: scale(0.9);
  opacity: 0;
}