「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 能的项目更加生动和吸引人。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/17706.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LabVIEW用户界面(UI)和用户体验(UX)设计

作为一名 LabVIEW 开发者&#xff0c;满足功能需求、保障使用便捷与灵活只是基础要求。在如今这个用户体验至上的时代&#xff0c;为 LabVIEW 应用程序设计直观且具有美学感的界面&#xff0c;同样是不容忽视的关键任务。一个优秀的界面设计&#xff0c;不仅能提升用户对程序的…

AWTK-WEB 快速入门(4) - JS Http 应用程序

XMLHttpRequest 改变了 Web 应用程序与服务器交换数据的方式&#xff0c;fetch 是 XMLHttpRequest 继任者&#xff0c;具有更简洁的语法和更好的 Promise 集成。本文介绍一下如何使用 JS 语言开发 AWTK-WEB 应用程序&#xff0c;并用 fetch 访问远程数据。 用 AWTK Designer 新…

餐饮油烟在线监测仪,守护蓝天的隐形卫士

在城市化的快速发展中&#xff0c;餐饮业作为人们日常生活不可或缺的一部分&#xff0c;带来了便捷与美味的同时&#xff0c;也产生了大量餐饮油烟污染问题。据研究表明&#xff0c;长期暴露于高浓度油烟环境中不仅影响人体健康&#xff0c;还对空气质量造成严重破坏。为了有效…

从Sora到有言:3D视频生成技术的突破与应用

近年来&#xff0c;AIGC领域飞速发展&#xff0c;这个词也越来越高频地出现在了大家的生活中。AIGC 能完成的任务也越来越多&#xff0c;大模型的能力飞速增长 —— 从Deepseek生成文字&#xff0c;到StableDiffusion生成图像&#xff0c;再到Sora可以生成视频。 而现在&#x…

xiao单栏/网格布局typecho主题模板源码

源码介绍 xiao单栏/网格布局typecho主题模板源码 一款基于 bootstrap5.3.3 开发的 typecho 单栏主题 效果预览 源码获取 xiao单栏/网格布局typecho主题模板源码

如何运用边缘计算控制器提升智能工厂的竞争力?

制造业正经历一场深刻的变革。其中&#xff0c;边缘计算作为一项关键技术&#xff0c;在提升生产效率、降低成本以及实现智能制造方面发挥着至关重要的作用。本文将探讨边缘计算在智能工厂中的应用场景及其带来的价值。 边缘计算简介 边缘计算是一种分布式计算范式&#xff0…

今日学习总结

复习了dfs的相关内容&#xff0c;完成了一道dfs相关的题目。 P2371挑战算周长 #include <stdio.h> // 定义一个二维字符数组 map 用于存储地图信息&#xff0c;大小为 25x25 char map[25][25]; // 定义一个常量二维数组 d 作为方向增量数组&#xff0c;用于表示 8 个不同…

SpringMVC学习使用

一、SpringMVC简单理解 1.1 Spring与Web环境集成 1.1.1 ApplicationContext应用上下文获取方式 应用上下文对象是通过new ClasspathXmlApplicationContext(spring配置文件) 方式获取的&#xff0c;但是每次从容器中获得Bean时都要编写new ClasspathXmlApplicationContext(sp…

HCIA项目实践---OSPF的知识和原理总结

9.5 OSPF 9.5.1 从哪些角度评判一个动态路由协议的好坏&#xff1f; &#xff08;1&#xff09;选路佳&#xff08;是否会出环&#xff09; OSPF 协议采用链路状态算法&#xff0c;通过收集网络拓扑信息来计算最短路径&#xff0c;从根本上避免了路由环路的产生。 &#xff08…

算法题(67):最长连续序列

审题&#xff1a; 需要我们在O&#xff08;n&#xff09;的时间复杂度下找到最长的连续序列长度 思路&#xff1a; 我们可以用两层for循环&#xff1a; 第一层是依次对每个数据遍历&#xff0c;让他们当序列的首元素。 第二层是访问除了该元素的其他元素 但是此时时间复杂度来到…

2021年全国研究生数学建模竞赛华为杯E题信号干扰下的超宽带(UWB)精确定位问题求解全过程文档及程序

2021年全国研究生数学建模竞赛华为杯 E题 信号干扰下的超宽带(UWB)精确定位问题 原题再现&#xff1a; 一、背景   UWB&#xff08;Ultra-Wideband&#xff09;技术也被称之为“超宽带”&#xff0c;又称之为脉冲无线电技术。这是一种无需任何载波&#xff0c;通过发送纳秒…

Vue3折线图,柱状图,饼图,各种图表,适用于所有全平台

开发工具&#xff1a;HBuilderX编译器&#xff0c;uniapp&#xff0c;Vue3&#xff1b; 目标&#xff1a;全平台适用&#xff0c;Web端&#xff0c;小程序端&#xff0c;Android端&#xff0c;ios端&#xff0c;快应用等所有平台&#xff0c;鸿蒙app&#xff0c;前端&#xff…

联想电脑如何进入BIOS?

打开设置 下滑找到更新与安全 点击恢复和立即重新启动 选择疑难解答 选择UEFI固件设置 然后如果有重启点击重启 重启开机时一直点击FNF10进入BIOS界面

ICIR2025 | CubeDiff:重新利用基于扩散的图像模型来生成360°全景图

CubeDiff是一种使用基于扩散的图像模型生成 360 全景图的新型框架。通过利用立方体图表示和微调预训练的文本到图像模型&#xff0c;CubeDiff 简化了全景图生成过程&#xff0c;提供了高质量、一致的全景图。 CubeDiff 利用立方体图来表示 360 全景图&#xff0c;并在一次传递中…

YOLO11网络结构以及改进1

YOLO11 1.YOLO11网络结构图在哪里&#xff1f;2.对应的网络结构图3.每一个模块详解3.1 Conv模块3.2关于卷积模块3.3 关于给各个模块指定参数的细节 4.加入CBAM 1.YOLO11网络结构图在哪里&#xff1f; 2.对应的网络结构图 3.每一个模块详解 3.1 Conv模块 位置&#xff1a;ultr…

兔兔答题应用于微信考试、付费考试、社会调查问卷、明星知识问答、员工培训考核、模拟自测、企业面试、试题库等多种场景。

“兔兔答题系统”是一个面向教育、培训和在线测评场景的智能化答题平台&#xff08;兔兔答题官网地址&#xff09;。其设计目标是帮助用户高效完成题目练习、考试组织及学习效果分析&#xff0c;通常具备以下核心功能和特色&#xff1a; 一、核心功能 题库管理 支持多题型录入&…

网络安全防范

实践内容 学习总结 PDR&#xff0c;$$P^2$$DR安全模型。 防火墙&#xff08;Firewall&#xff09;&#xff1a; 网络访问控制机制&#xff0c;布置在网际间通信的唯一通道上。 不足&#xff1a;无法防护内部威胁&#xff0c;无法阻止非网络传播形式的病毒&#xff0c;安全策略…

Java 设计模式之组合模式

文章目录 Java 设计模式之组合模式概述UML代码实现 Java 设计模式之组合模式 概述 组合模式(Composite)&#xff1a;将对象组合成树形结构以表示’部分-整体’的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性。优点&#xff1a;客户端可以统一处理单个对象…

基于VS2022在Windows上首次尝试开发C++ gRPC服务端和客户端的详细步骤

文章目录 **1. 创建解决方案与项目****2. 编写proto文件****3. 生成gRPC代码****4. 配置项目属性****服务端项目&#xff08;gRPCServer&#xff09;****客户端项目&#xff08;gRPCClient&#xff09;** **5. 实现服务端代码****6. 实现客户端代码****7. 编译与运行****注意事…

云创智城充电系统:基于 SpringCloud 的高可用、可扩展架构详解-多租户、多协议兼容、分账与互联互通功能实现

在新能源汽车越来越普及的今天&#xff0c;充电基础设施的管理和运营变得越来越重要。云创智城充电系统&#xff0c;就像一个超级智能管家&#xff0c;为新能源充电带来了全新的解决方案&#xff0c;让充电这件事变得更方便、更高效、更安全。 一、厉害的技术架构&#xff0c;让…