「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>