当前位置: 首页 > news >正文

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

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

目录

    • 安装依赖
    • 全局引入 Animate.css
    • 在组件中使用 Animate.css
    • 💥与 Vue 过渡组件结合使用
    • 动态绑定动画效果
    • 结语

在前端开发中,动画效果是提升用户体验的有效手段。开源项目 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__animatedanimate__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>

通过点击按钮,切换了两种动画效果:fadeInzoomIn

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

结语

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

相关文章:

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

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode︱ Gitee ︱ Github &#x1f496; 欢迎点赞 &#x1f44d; 收藏 ⭐评论 …...

论文阅读 DOES END-TO-END AUTONOMOUS DRIVING REALLY NEED PERCEPTION TASKS?

端到端的强势来袭&#xff0c;好久了~~~ 简单翻译&#xff1a;端到端真的需要感知任务嘛&#xff1f; code https://github.com/PeidongLi/SSR. https://arxiv.org/pdf/2409.18341 1. 摘要 端到端自动驾驶&#xff08;E2EAD&#xff09;方法通常依赖于监督式感知任务来提取显…...

25年黑龙江省考报名流程详细教程

2025年黑龙江省考报名马上就要开始报名啦&#xff01; 有想要参加黑龙江省考报名的同学&#xff0c;可以提前了解一下考试报名流程&#xff0c;熟悉考试报名照要求&#xff01; 一、考试时间安排 报名时间&#xff1a;2月18日9:00至2月23日17:00 缴费时间&#xff1a;2月18日…...

基于SpringBoot的小区运动中心预约管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…...

部署postgresql_exporter监控pgsql

部署exporter配置监控job配置告警规则 一键部署脚本 #!/bin/bash# 定义变量 PG_HOST"xx.ap-southeast-1.rds.amazonaws.com" PG_PORT"5432" PG_PASSWORD"bagayalu321" PG_USER"monitor_user" EXPORTER_VERSION"0.16.0" #…...

Mac本地部署deepseek

Ollama 运行deepseek需要本地运行工具ollama&#xff0c;安装路径如下 ollama官方网站 (https://ollama.com/download) 下载Mac版ollama&#xff0c;点击移至application下面 DeepSeek R1 14b 通过ollama安装deepseek&#xff0c;对应的运行指令可通过 deepseek本地部署列表…...

huggingface+下载deepseek8b lamda+本地部署 笔记

步骤倒过来 1.python hf_download.py --model unsloth/DeepSeek-R1-Distill-Llama-8B-GGUF model后加模型名&#xff08;HF-Mirror中查&#xff09; 【huggingface模型下载不下来&#xff1f;这里教你万能解决办法~huggingface小白使用指南。】 https://www.bilibili.com/video…...

中上211硕对嵌入式AI感兴趣,如何有效规划学习路径?

今天给大家分享的是一位粉丝的提问&#xff0c;中上211硕对嵌入式AI感兴趣&#xff0c;如何有效规划学习路径&#xff1f; 接下来把粉丝的具体提问和我的回复分享给大家&#xff0c;希望也能给一些类似情况的小伙伴一些启发和帮助。 同学提问&#xff1a; 中上211&#xff0c;…...

Jedis 客户端 用于java连接redis服务

<dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId...

车载诊断数据库 --- 通用性诊断数据库ODX

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活,除了生存温饱问题之外,没有什么过多的欲望,表面看起来很高冷,内心热情,如果你身…...

docker 基础命令使用(ubuntu)

docker 状态查询 docker ps docker ps -adocker --version docker info docker --help docker run --help docker ps --help ...docker 操作镜像命令 docker imagesdocker rmi 镜像id/镜像名docker 操作容器命令 docker ps docker ps -adocker run 命令 # 端口映射 -p 参数…...

IDEA集成DeepSeek

引言 随着数据量的爆炸式增长&#xff0c;传统搜索技术已无法满足用户对精准、高效搜索的需求。 DeepSeek作为新一代智能搜索技术&#xff0c;凭借其强大的语义理解与深度学习能力&#xff0c;正在改变搜索领域的游戏规则。 对于 Java 开发者而言&#xff0c;将 DeepSeek 集成…...

Unity 接入Luabn记录图解

Luban 文档及链接项目目录UnityEditor 导表工具 文档及链接 官方文档 最新版本 项目目录 接入的方法有很多&#xff0c;我这里随便找了一种 https://gitee.com/focus-creative-games/luban_examples.git如上图&#xff0c;git拉去后&#xff0c;只保留圈起来的2个文件夹。…...

【MySQL】我在广州学Mysql 系列——Mysql 日志管理详解

ℹ️大家好&#xff0c;我是练小杰&#xff0c;今天又是新的一周了&#xff0c;又该摆好心态迎接美好的明天了&#xff01;&#xff01;&#xff01;&#x1f606; 本文主要对Mysql数据库中的日志种类以及基本命令进行讨论&#xff01;&#xff01; 回顾&#xff1a;&#x1f4…...

【线段树 二分查找】P3939 数颜色|普及+

本文涉及知识点 C线段树 C二分查找 P3939 数颜色 题目背景 大样例可在页面底部「附件」中下载。 题目描述 小 C 的兔子不是雪白的&#xff0c;而是五彩缤纷的。每只兔子都有一种颜色&#xff0c;不同的兔子可能有 相同的颜色。小 C 把她标号从 1 到 n n n 的 n n n 只兔…...

2011年下半年软件设计师考试上午题真题的详细知识点分类整理(附真题及答案解析)

以下是针对2011年下半年软件设计师考试上午题真题的详细知识点分类整理&#xff0c;涵盖所有题目涉及的核心知识点&#xff0c;供考生背诵记忆&#xff1a; 1. 数据结构与算法 树与图&#xff1a; 树的性质&#xff1a;树的节点数、深度、叶子节点数之间的关系。二叉树遍历&am…...

tmagic-editor,腾讯开源的基于 Vue3 的页面可视化编辑器

hi, 大家好, 我是徐小夕. 之前一直在社区分享零代码&低代码的技术实践&#xff0c;也陆陆续续设计并开发了多款可视化搭建产品&#xff0c;比如&#xff1a; H5-Dooring&#xff08;页面可视化搭建平台&#xff09;V6.Dooring&#xff08;可视化大屏搭建平台&#xff09;F…...

K8s学习总结

文章目录 介绍Kubernetes 核心组件k8s安装环境安装组件 常用命令测试1. 创建一个测试应用程序2. 检查 Pod 是否运行 3. 暴露应用让外部访问4. 查看服务的暴露端口5. 访问 nginx 服务6. 验证节点调度 如有错误&#xff0c;敬请指针&#xff0c;谢谢! 介绍 Kubernetes&#xff0…...

正则表达式(Regular expresssion)

正则表达式 匹配单次 . &#xff1a;匹配任意一个字符 [ ] &#xff1a;匹配[ ]里举例的任意一个字符 /d &#xff1a;匹配数字0-9 /D &#xff1a;匹配非数字 /s &#xff1a;匹配空白或tab建 /S &#xff1a;匹配非空白 /w &#xff1a;…...

Python的那些事第二十一篇:Python Web开发的“秘密武器”Flask

基于 Flask 框架的 Python Web 开发研究 摘要 在 Web 开发的江湖里,Python 是一位武林高手,而 Flask 则是它手中那把小巧却锋利的匕首。本文以 Flask 框架为核心,深入探讨了它在 Python Web 开发中的应用。通过幽默风趣的笔触,结合实例和表格,分析了 Flask 的特性、优势以…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...