Vue3实战笔记（26）—有趣的动画--transition

---

前言

学习了几天路由，今天放松一下，来点有趣的事情，给路由加个动画。

---

一、路由动画切换

官方文档是这样说的，在想要跳转的路由外面加一层：

<transition name="slide">
<RouterView></RouterView>
</transition>

然而：

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

动画是可以自己定义的，然后在style中：

<style>
/* 过度动画 */

/*fade样式*/
.fade-enter-active {
  transition: all 0.3s ease-out;
}

.fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.fade-enter-from,
.fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

/*bounce样式*/
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>

其中，name的作用就是定义你style的开头名称，默认是v开头，例如：
v-enter-active替换成了fade-enter-active

试试去吧非常炫酷！

---

总结

在 Vue 中添加路由动画，可以使用 Vue 的内置过渡效果结合 Vue Router，可以定义各种各样的动画，提高用户体验，Vue Router 的过渡效果还可以更加复杂和精细，比如可以根据不同的路由使用不同的过渡效果，或者在多个组件之间进行过渡。后面会实战几种好看的动画和详细的使用方法以及源码。

你要相信，看似不起波澜的日复一日，会突然在某一天让人看到坚持的意义。