Vue - 关于Router路由跳转时显示的animate.css动画

Vue - 关于Router路由跳转时显示的animate.css动画

在Vue中，操作路由跳转时页面是闪白的，没有动画效果，我们可以通过在router-view中设置transition，并搭配animate丰富的动画效果来美化路由跳转时的显示效果.

1.安装animate

npm i -S animate.css

2.在main中引入animate.css

import 'animate.css'

3.在需要路由router-view跳转的页面中设置

如果用< transition >包裹< router-view >会出现leave-active-class动画失效

<template>
  <router-view class="view" v-slot="{ Component }">
    <transition
      mode="out-in"
      enter-active-class="animate__animated animate__fadeInRight"
      leave-active-class="animate__animated animate__fadeOutLeft"
    >
      <component :is="Component" />
    </transition>
  </router-view>
</template>

效果如下：

目前 Vue 的transition内置标签只能控制一种动画类型，要么是 CSS transition 过渡动画，要么是 CSS animation 关键帧动画。

CSS transition 过渡动画：

1. v-enter-from 淡入效果的起始状态。它先附加到元素上，然后元素被插入 DOM 树。插入 DOM 树后，下一帧该类被立即移除。

2. v-enter-active 淡入效果的过渡状态，整个过渡期间生效。该类用于设定动画时长、延时和缓动曲线（easing curve）等动画参数。

3. v-enter-to 淡入效果的最终状态。当 v-enter-from 类被移除的同时，添加 v-enter-to 类。当过渡动画结束后，移除 v-enter-to 类。

4. v-leave-from 淡出效果的起始状态。

5. v-leave-active 淡出效果的过渡状态。

6. v-leave-to 淡出效果的最终状态。

CSS animation 关键帧动画：

1. enter-from-class

2. enter-active-class

3. enter-to-class

4. leave-from-class

5. leave-active-class

6. leave-to-class

对于关键帧动画，只需设定 enter-active-class 和 leave-active-class 即可。

注意事项：

问题：
淡出和淡入同时发生
解决方法：
默认情况下，元素的淡出和淡入是同时发生的。设定属性 mode=“out-in”，可以协调不同元素的动画时序，先淡出后淡入。

参考链接：
animate动画：https://animate.style/