Vue3的transition标签以及animate.css使用详解
一:前言
在项目开发中,有一种特殊情况是使用动画过渡去完成某个效果。比如淡入淡出,或者在动画完成后执行某些操作等。在以前开发中我们通常会选择使用 CSS3 进行研发。但是这样会有很多不好的地方,比如最原始化的封装,以及复杂需求下的代码量庞大且冗余。再者就是本可以不使用 CSS 样式的文件又添加了 CSS 文件。这样是很奇怪的。
因此我们现在在进行动画过渡可以使用别人写好提供给我们的 animate.css 样式。而在 Vue3 开发中,当我们需要在动画过渡前中后或者被中断的时候执行某些 JS 逻辑时,可以使用 transition 标签。接下来,让我们来看一下如何这两个如何使用吧!
二:使用
1、animate.css
先放上 animate.css 的官网:
Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
https://animate.style/ 进入官网后我们可以在右侧看到有很多动画的样式,随便点击一个样式后,中间的文字会进行相对应的变化。

引入项目:
- 首先打开项目,在项目根目录下打开 powershell
- 输入 npm install animate.css -S
- 等待安装成功后,进入你需要使用的页面
- 在文件内引入:import 'animate.css';
- 在官网中复制喜欢的样式,放进你需要添加的标签的 class 中
- 注意,上面这一步需要在复制的前面加上 animate_animated 才可以有效果
<div class="animate__animated animate__bounceOutDown" v-if="isShow">内容</div><script>// 引入animate.cssimport 'animate.css';
</script>
这时候我们就可以看到效果了。animate.css 的使用是很简单的。
2、transition 标签
这个标签是内置的,我们直接在 html 中书写即可,我们可以看到代码提示:这代表着,他是有多个接收值的,并且有多个内置方法。知道这些我们就方便写后面的代码了。

1)初始化代码
这里是我们代码的初始化,代码效果如下图所示:点击按钮显示或者隐藏里面的元素
<template><div class="home"><button @click="isShow = !isShow">切换状态</button><transition><div v-if="isShow" class="content"></div></transition></div>
</template><script lang="ts" setup>
import { ref } from 'vue';const isShow = ref(false)
</script><style scoped>
.content {margin-top: 10px;width: 300px;height: 300px;background: pink;
}
</style>

2)第一种:直接使用变量进行控制
这种是比较简单的方法,如下面代码所示,我们传了,进入和离开的样式。这样的优点是结合 animate.css 代码行数比较少,且具有较高的阅读性,方便后期修改和维护。但是有一个不好的地方就是,这样只是定义了单纯的动画过渡,如果书写逻辑将会很繁琐,需要定义 ref 等等,这里我就不举例了。因此产生了使用方法控制。
<transition :duration="500"leave-active-class="animate__animated animate__bounceOutDown"enter-active-class="animate__animated animate__bounceInLeft"><div v-if="isShow" class="content"></div></transition>
3)第二种:使用内置方法进行控制
代码如下,我们可以看到,这八个内置方法其实是八个生命周期。以进入为例,四个分别是进入前,进入中,进入后,进入中断。这样我们可以在不同的周期中写不同的逻辑,是不是很方便了?
这里额外注意一下,各个周期中的 el 是接收的这个 element 元素,另外有两个特殊的周期是 enter 和 leave 。这两个的参数中有接收 done 当执行了这个 done 方法后,才会执行 enter-after 声明周期。leave 同理。
<template><div class="home"><button @click="isShow = !isShow">切换状态</button><transition :duration="500"@before-enter="EnterBefore"@enter="EnterActive"@after-enter="EnterTo"@enter-cancelled="EnterCancelled"@before-leave="LeaveForm"@leave="Leave"@after-leave="LeaveTo"@leave-cancelled="LeaveCancell"><div v-if="isShow" class="content"></div></transition></div>
</template><script lang="ts" setup>
import { ref } from 'vue';const isShow = ref(false)const EnterBefore = (el:Element)=>{console.log('进入前');}
const EnterActive = (el:Element,done:Function)=>{console.log('进入中');setTimeout(()=>{done() // 执行完成,要等待三秒钟才会执行下面这个过度完成的方法},3000)
}
const EnterTo = (el:Element)=>{console.log('过度完成');
}
const EnterCancelled = (el:Element)=>{console.log('过渡效果被打断');
}// 离开
const LeaveForm = (el:Element)=>{console.log('离开之前');
}
const Leave = (el:Element,done:Function)=>{console.log('离开过度曲线');setTimeout(()=>{done() // 执行完成,要等待三秒钟才会执行下面这个过度完成的方法},3000)
}
const LeaveTo = (el:Element)=>{console.log('离开完成');
}
const LeaveCancell = (el:Element)=>{console.log('离开被打断');
}
</script>

4)使用 jasp 进行优化
- 使用 npm i gsap -S 安装jasp
- 在项目中使用 import jasp from 'gasp' 导入
项目代码优化如下,我们本次只使用三个生命周期。这时,我们看到的应该是一个在左上角缩放的图,由于没有装转 git 工具,因此这里不放效果 git 图。各位小伙伴可以在项目里 安装 animate 和 gasp 后直接将下面的代码复制进页面即可看到效果。
<template><div class="home"><button @click="isShow = !isShow">切换状态</button><transition :duration="500"@before-enter="EnterBefore"@enter="EnterActive"@leave="Leave"><div v-if="isShow" class="content"></div></transition></div>
</template><script lang="ts" setup>
import { ref } from 'vue';
import gsap from 'gsap' // npm i gsap -Sconst isShow = ref(false)const EnterBefore = (el:Element)=>{console.log('进入前');gsap.set(el,{width:0,height:0})
}
const EnterActive = (el:Element,done:gsap.Callback)=>{console.log('进入中');gsap.to(el,{width:300,height:300,onComplete:done // 加载完成后调用 done 方法})
}// 离开
const Leave = (el:Element,done:gsap.Callback)=>{console.log('离开过度曲线');gsap.to(el,{width:0,height:0,onComplete:done})
}</script><style scoped>
.content {margin-top: 10px;background: pink;
}
</style>
三:结尾
过渡效果可以说在开发中算是比较重要的一部分。熟练的掌握图像过渡可以更加合理贴切的显示与隐藏,在视觉上给用户更好的体验。并且书写逻辑也方便,可以类似断点的形式去定位问题出现的地方。好啦以上就是本文的全部内容,希望能够对各位小伙伴有所收获哦!
相关文章:
Vue3的transition标签以及animate.css使用详解
一:前言 在项目开发中,有一种特殊情况是使用动画过渡去完成某个效果。比如淡入淡出,或者在动画完成后执行某些操作等。在以前开发中我们通常会选择使用 CSS3 进行研发。但是这样会有很多不好的地方,比如最原始化的封装,…...
IDEA不支持Java8了怎么办?
IDEA不支持Java8了怎么办? 01 异常发生场景 当我准备创建一个springboot项目时,发现Java8没了 02 问题的产生及其原因 查阅了官方文档之后,确认了是Spring Boot 不再支持 Java 8,不是我的问题,这一天终于还是来了 0…...
flutter的TextField参数、案例整理(上)
TextField 概述 TextField 用于文本输入 构造函数 const TextField({Key key,this.controller, this.focusNode,this.decoration const InputDecoration(),TextInputType keyboardType,this.textInputAction,this.textCapitalization TextCapitalization.none,this.style…...
【Linux进阶之路】进程间通信
文章目录 一、原理二、方式1.管道1.1匿名管道1.1.1通信原理1.1.2接口使用 1.2命名管道 2.共享内存2.1原理2.2接口使用 3.消息队列原理 4.信号量引入原理 总结 一、原理 进程间的通信是什么?解释: 简单理解就是,不同进程之间进行数据的输入输出…...
深度学习框架配置
目录 1. 配置cuda环境 1.1. 安装cuda和cudnn 1.1.1. 显卡驱动配置 1.1.2. 下载安装cuda 1.1.3. 下载cudnn,将解压后文件复制到cuda目录下 1.2. 验证是否安装成功 2. 配置conda环境 2.1. 安装anaconda 2.2. conda换源 2.3. 创建conda环境 2.4. pip换源 3.…...
全局配置
1.全局配置文件及其配置项 1.1.小程序窗口 1.2 窗口节点 1.2.1 导航栏标题 标题: 标题颜色: 背景色:只支持16进制值 下拉刷新: 刷新背景色: 刷新样式: 触底距离:...
leetcode算法之字符串
目录 1.最长公共前缀2.最长回文子串3.二进制求和4.字符串相乘 1.最长公共前缀 最长公共前缀 class Solution { public:string longestCommonPrefix(vector<string>& strs) {//法一:两两比较string ret strs[0];for(int i1;i<strs.size();i){ret f…...
mongodb查询数据库集合的基础命令
基础命令 启动mongo服务 mongod -f /usr/local/mongodb/mongod.conf //注意配置文件路径停止mongo服务 关闭mongodb有三种方式: 一种是进入mongo后通过mongo的函数关闭; use admin db.shutdownServer()一种是通过mongod关闭; mongod --s…...
基于FactoryBean、实例工厂、静态工厂创建Spring中的复杂对象
😉😉 学习交流群: ✅✅1:这是孙哥suns给大家的福利! ✨✨2:我们免费分享Netty、Dubbo、k8s、Mybatis、Spring...应用和源码级别的视频资料 🥭🥭3:QQ群:583783…...
Android 如何让路由器或者其他AP设备获取到主机名
问题原因: 连接到AP设备后,发现主机名在路由器或者其他AP设备都无法正常显示 抓取tcpdump log发现DHCP request option中没有携带host name(Option 12)字段 如下图所示 修改方法: 将config_dhcp_client_hostname配置true后,可以看到host name了 具体代码逻辑如下 pack…...
java三大集合类--List
List Set Map 一、List 几个小问题: 1、接口可以被继承吗?(可以) 2、接口可以被多个类实现吗?(可以) 3、以下两种写法有什么区别? //List list1new List();是错误的因为List()…...
机器人向前冲
欢迎来到程序小院 机器人向前冲 玩法:一直走动的机器人,点击鼠标左键进行跳跃,跳过不同的匝道,掉下去即为游戏接续, 碰到匝道铁钉游戏结束,一直往前冲吧^^。开始游戏https://www.ormcc.com/play/gameStart…...
jq——实现弹幕滚动(往左滚动+往右滚动)——基础积累
最近同事在写弹幕功能,下面记录以下代码: 1.html代码 <div id"scrollContainer"></div>2.引入jq <script src"./script/jquery-1.8.3.js" type"text/javascript"></script>3.jq代码——往左滚…...
深度学习第2天:RNN循环神经网络
☁️主页 Nowl 🔥专栏《机器学习实战》 《机器学习》 📑君子坐而论道,少年起而行之 文章目录 介绍 记忆功能对比展现 任务描述 导入库 处理数据 前馈神经网络 循环神经网络 编译与训练模型 模型预测 可能的问题 梯度消失 梯…...
深度学习之基于百度飞桨PaddleOCR图像字符检测识别系统
欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介主要特点使用步骤 二、功能三、系统四. 总结 一项目简介 # Introduction to PaddleOCR Image Character Detection and Recognition System Based on Baidu…...
九、LuaTable(表)
文章目录 一、定义二、Table(表)的构造三、Table 操作(一)Table连接(二)插入和移除(三)Table 排序(四)Table 最大值 一、定义 table 是 Lua 的一种数据结构用来帮助我们创建不同的数…...
每日一题(LeetCode)----链表--链表最大孪生和
每日一题(LeetCode)----链表–链表最大孪生和 1.题目(2130. 链表最大孪生和) 在一个大小为 n 且 n 为 偶数 的链表中,对于 0 < i < (n / 2) - 1 的 i ,第 i 个节点(下标从 0 开始)的孪生节点为第 (n…...
腾讯云轻量服务器通过Docker搭建外网可访问连接的redis5.x集群
原创/朱季谦 最近买了一台4核16的腾讯云轻量应用服务器,花了我快四百的大洋,打算搭建一堆docker组件集群,最先开始是通过docker搭建redis集群,计划使用三个端口,分别是7001,7002,7003。 腾讯云服务器有防火墙限制,故…...
C++学习之路(十一)C++ 用Qt5实现一个工具箱(增加一个进制转换器功能)- 示例代码拆分讲解
上篇文章,我们用 Qt5 实现了在小工具箱中添加了《时间戳转换功能》功能。为了继续丰富我们的工具箱,今天我们就再增加一个平时经常用到的功能吧,就是「 进制转换 」功能。下面我们就来看看如何来规划开发一个这样的小功能并且添加到我们的工具…...
C语言每日一题(40)栈实现队列
力扣232 用栈实现队列 题目描述 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作(push、pop、peek、empty): 实现 MyQueue 类: void push(int x) 将元素 x 推到队列的末尾int pop() 从队列的开头移除并…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
【Veristand】Veristand环境安装教程-Linux RT / Windows
首先声明,此教程是针对Simulink编译模型并导入Veristand中编写的,同时需要注意的是老用户编译可能用的是Veristand Model Framework,那个是历史版本,且NI不会再维护,新版本编译支持为VeriStand Model Generation Suppo…...
在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率:以冒泡排序为例
目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码:冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...
WebRTC调研
WebRTC是什么,为什么,如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...
2025年低延迟业务DDoS防护全攻略:高可用架构与实战方案
一、延迟敏感行业面临的DDoS攻击新挑战 2025年,金融交易、实时竞技游戏、工业物联网等低延迟业务成为DDoS攻击的首要目标。攻击呈现三大特征: AI驱动的自适应攻击:攻击流量模拟真实用户行为,差异率低至0.5%,传统规则引…...
