「vue3-element-admin」Vue3 + TypeScript 项目整合 Animate.css 动画效果实战指南

🚀 作者主页： 有来技术
🔥 开源项目： youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template
🌺 仓库主页： GitCode︱ Gitee ︱ Github
💖 欢迎点赞 👍 收藏 ⭐评论 📝 如有错误敬请纠正！

在前端开发中，动画效果是提升用户体验的有效手段。开源项目 vue3-element-admin 中，原本使用的是 Element-Plus 内置过渡动画，但这种动画效果比较单一。为了增强用户体验，我们决定将 Animate.css 这一强大的 CSS 动画库整合到 Vue3 + TypeScript 项目中。

本文将详细介绍如何将 Animate.css 集成到基于 Vue3 和 TypeScript 的项目中，从依赖安装到如何在组件中灵活应用动画，帮助你快速上手。🚀

以下步骤参考 Animate.css 官方文档

安装依赖

安装 animate.css 库

pnpm add animate.css

全局引入 Animate.css

在 Vue3 + TypeScript 项目中，通常在项目的入口文件中进行全局引入。对于基于 Vite 构建的项目，入口文件一般是 main.ts。

在 main.ts 中加入以下代码来引入 Animate.css：

import { createApp } from 'vue'
import App from './App.vue'// 全局引入 animate.css
import 'animate.css'const app = createApp(App)
app.mount('#app')

这样，Animate.css 就会在整个项目中生效，接下来就可以在各个组件中使用动画效果了！

在组件中使用 Animate.css

Animate.css 使用非常简单，只需要在需要动画效果的元素上添加相应的类名即可。注意，Animate.css 4.x 版本中的所有动画类都以 animate__ 为前缀，并且必须与 animate__animated 一起使用。

例如，在组件中：

<template><div class="animate__animated animate__fadeInDown">欢迎使用有来开源后端管理前端模板 vue3-element-admin </div>
</template>

在这个示例中，给 <div> 元素添加了 animate__animated 和 animate__fadeInDown 类，页面加载时会自动应用“向下淡入”动画效果。

更多动画效果参考官方：Animate.css

💥与 Vue 过渡组件结合使用

Animate.css 可以与 Vue 内置的 <Transition> 组件配合使用，实现路由切换和页面过渡动画效果。通过这种方式，可以让页面切换更加平滑和生动。比如，项目 vue3-element-admin 就利用 Animate.css 实现了路由切换时的页面过渡动画效果。

具体实现代码如下，参考自 AppMain.vue：

<template><section class="app-main"><router-view><template #default="{ Component, route }"><transition enter-active-class="animate__animated animate__fadeIn" mode="out-in"><keep-alive :include="cachedViews"><component :is="Component" :key="route.path" /></keep-alive></transition></template></router-view></section>
</template><script setup lang="ts">
import { useSettingsStore, useTagsViewStore } from "@/store";
import variables from "@/styles/variables.module.scss";// 缓存页面集合
const cachedViews = computed(() => useTagsViewStore().cachedViews);
</script><style lang="scss" scoped>
.app-main {position: relative;overflow-y: auto;background-color: var(--el-bg-color-page);
}
</style>

• <transition>: 用于包裹需要过渡的组件或页面。enter-active-class 设置进入时的动画类，这里使用了 Animate.css 的 fadeIn 动画。
• mode="out-in": 使当前页面退出后，才加载新的页面，从而实现更加平滑的过渡效果。

在这个示例中，使用 <Transition> 组件来实现进场动画。当组件出现时，应用 fadeIn 动画，使得交互更加流畅。

更多动画效果参考官方：Animate.css

动态绑定动画效果

Vue3 的响应式数据和条件渲染功能，使得动态切换动画变得十分简单。可以根据某个状态切换不同的动画效果：

<template><button @click="toggleAnimation">切换动画</button><div :class="['animate__animated', currentAnimation]">动画效果展示 </div>
</template><script setup lang="ts">
import { ref, computed } from 'vue'const isActive = ref(true)
const animationA = 'animate__fadeIn'
const animationB = 'animate__zoomIn'const currentAnimation = computed(() => (isActive.value ? animationA : animationB))function toggleAnimation() {isActive.value = !isActive.value
}
</script>

通过点击按钮，切换了两种动画效果：fadeIn 和 zoomIn。

更多动画效果参考官方：Animate.css

结语

通过本文，掌握如何在 Vue3 + TypeScript 项目中整合 Animate.css。无论是简单的动画效果，还是与 Vue 的动态绑定和过渡效果结合，Animate.css 能的项目更加生动和吸引人。