Vite+Vue3项目使用第三方Animate.css动画库简单实现页面级的路由转场动画详细教程

vue通过第三方集成Animate.css简单快速的实现动画，通过类名引用，可以轻松实现Animate的所有动画，Animate.css是一款强大的预设css3动画库，Animate.css内置了很多典型的css3动画，兼容性好使用方便。

一、页面级路由转场动画实现思路参考

Vue Router官方过渡动效教程：https://router.vuejs.org/zh/guide/advanced/transitions.html

二、安装并全局导入Animate.css

• 安装

 npm install animate.css
1

• 全局导入

//animate动画库引入
import 'animate.css'
1
2

• Vue集成使用第三方Animate.css动画库详细教程，查看我以前的文章。
  Vue实现集成使用第三方Animate.css动画库详细教程（解决鼠标移入移出闪烁问题）

三、编写App.vue下RouterView相关代码

根据每个路由自定义的meta的动画类名，把自定义的路由动画animate.css导入到enter-active-class和leave-active-class当中实现不同页面使用不同的页面级路由专场动画。

• enter-active-class:设置进入的动画类名
• leave-active-class:设置离开的动画类名

<router-view v-slot="{ Component, route }">
    <transition 
    name="fade"
    :enter-active-class="route.meta.e_class"
    :leave-active-class="route.meta.l_class"
  >
    <component :is="Component" />
  transition>
router-view>
1
2
3
4
5
6
7
8
9

四、自定义路由meta的动画参数

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'index',
      meta: { 
        header:false,
        footer:true,
        e_class:"animate__animated",
        l_class:"animate__animated animate__fadeOutLeft"
      },
      component: () => import('../views/index.vue')
    },
    {
      path: '/login',
      name: 'login',
      meta: { 
        header:true,
        footer:true,
        e_class:"animate__animated animate__fadeInLeft",
        l_class:"animate__animated animate__fadeOutLeft"
      },
      component: () => import('../views/login.vue')
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

本文原创，原创不易，如需转载，请联系作者授权。