众所周知，animate作为一款优秀的开源CSS动画库，具有使用简单、兼容性强、动画丰富的特点。那么如何在自己的项目中使用炫酷的animate动画，实现页面切换特效呢？本文带你快速上手使用animate动画。

一、创建项目与页面

初始化项目后默认有home页面和about页面。为了演示添加不同的动画效果，我们再添加test1和test2页面，并将各个页面使用router-link互相链接跳转。

1. Home.vue

<template>
  <div class="home">
    <router-link to="/about">跳转About</router-link>
    <br>
    <router-link to="/test1">跳转Test</router-link>
    <br>
    <router-link to="/test2">跳转Test2</router-link>
    <h1>这是主页</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>
<style lang="scss">
.home{
  background-color: skyblue;
  height: 100vh;
}
</style>

2. About.vue

<template>
  <div class="about">
    <router-link to="/home">跳转Home</router-link>
    <br>
    <router-link to="/test1">跳转Test1</router-link>
    <br>
    <router-link to="/test2">跳转Test2</router-link>
    <h1>这是关于页</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
}
</script>
<style lang="scss">
.about{
  background-color: pink;
  height: 100vh;
}
</style>

3. Test1.vue

<template>
  <div class="test1">
    <router-link to="/about">跳转About</router-link>
    <br>
    <router-link to="/home">跳转Home</router-link>
    <br>
    <router-link to="/test2">跳转Test2</router-link>
    <h1>这是测试页</h1>
  </div>
</template>

<script>
export default {
  name: 'Test',
}
</script>
<style lang="scss">
.test1{
  background-color: darkcyan;
  height: 100vh;
}
</style>

4. Test2.vue

<template>
  <div class="test2">
    <router-link to="/about">跳转About</router-link>
    <br>
    <router-link to="/home">跳转Home</router-link>
    <br>
    <router-link to="/test1">跳转Test1</router-link>
    <h1>这是测试页</h1>
  </div>
</template>

<script>
export default {
  name: 'Test',
}
</script>
<style lang="scss">
.test2 {
  background-color: gold;
  height: 100vh;
}
</style>

5. router

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About')
  },
  {
    path: '/test1',
    name: 'Test1',
    component: () => import('@/views/Test1')
  },
  {
    path: '/test2',
    name: 'Test2',
    component: () => import('@/views/Test2')
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

二、添加动画配置

1. 安装animate.css

npm install animate.css -D

2. 修改router，添加动画元信息名称

首先修改router下的index.js，添加meat标签，并定义不同的动画类型，达到自定义不同页面添加不同的动画效果。

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home'),
    meta: {
      transitionClass: 'back' //左右切换动画
    }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About'),
    meta: {
      transitionClass: 'gradually' //淡入淡出动画
    }
  },
  {
    path: '/test1',
    name: 'Test1',
    component: () => import('@/views/Test1'),
    meta: {
      transitionClass: 'jump' //旋转跳跃动画
    }
  },
  {
    path: '/test2',
    name: 'Test2',
    component: () => import('@/views/Test2'),
    meta: {
      transitionClass: 'fast' //快速切换动画
    }
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3.修改App.vue

核心思路是从route的元信息中取到动画类型，然后给transition标签动态绑定不同的animate动画属性，达到自定义动画切换效果。

<template>
  <router-view class="router-view" v-slot="{ Component }">
    <transition :enter-active-class="enterClass"
                :leave-active-class="leaveClass"
                :duration="{ enter: 800, leave: 500 }">
      <component :is="Component"/>
    </transition>
  </router-view>
</template>
<script>
import {ref, watch} from "vue";
import {useRoute} from "vue-router";
import animate from "animate.css";

export default {
  name: "App",
  setup() {
    let enterClass = ref('');
    let leaveClass = ref('');
    const route = useRoute();
    // 监控路由的变化
    watch(
        () => route.meta.transitionClass,
        (transitionClass) => {
          // 平滑切换
          if (transitionClass === 'back') {
            enterClass.value = 'animate__animated animate__fadeInRight'
            leaveClass.value = 'animate__animated animate__fadeOutRight'
          }
          // 跳转
          else if (transitionClass === 'jump') {
            enterClass.value = 'animate__animated animate__rollIn'
            leaveClass.value = 'animate__animated animate__rollOut'
          }
          // 渐入
          else if (transitionClass === 'gradually') {
            enterClass.value = 'animate__animated animate__fadeIn'
            leaveClass.value = 'animate__animated animate__fadeOut'
          }
          // 快速切换
          else if (transitionClass === 'fast') {
            enterClass.value = 'animate__animated animate__fadeInRightBig'
            leaveClass.value = 'animate__animated animate__fadeOutRightBig'
          } else {
            enterClass.value = ''
            leaveClass.value = ''
          }
        }
    );
    return {enterClass, leaveClass};
  },
};
</script>
<style lang="scss">
.router-view {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}
</style>

三、效果演示

- 图片地址: https://cdn.cuiliangblog.cn/media/markdown/222.gif - 参考链接

animate中文网：http://www.animate.net.cn/ VUE动画参考官方文档：https://v3.cn.vuejs.org/guide/transitions-overview.html