vue中中的动画组件使用及如何在vue中使用animate.css
“< Transition >” 是一个内置组件,这意味着它在任意别的组件中都可以被使用,无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发:
- 由 v-if 所触发的切换
- 由 v-show 所触发的切换
- 由特殊元素 切换的动态组件
- 改变特殊的 key 属性
官方文档链接:https://cn.vuejs.org/guide/built-ins/transition.html
以下是一个简单的demo
<template><div style="margin-top: 200px;margin-left: 200px;"><div><button @click="show = !show">切换动画</button></div><div><Transition name="fade"><p v-show="show">测试动画</p></Transition></div></div>
</template><script setup lang="ts">
import { ref,watch } from 'vue'
let show = ref<Boolean>(true);
</script><style scoped>
/* 开始过度 */
.fade-enter-from{background:red;width:0px;height:0px;
}
/* 过渡中 */
.fade-enter-active{transition: all 2.5s linear;
}
/* 过度完成 */
.fade-enter-to{background:yellow;width:200px;height:200px;
}
/* 离开的过度 */
.fade-leave-from{width:200px;height:200px;background:yellow;
}
/* 离开中过度 */
.fade-leave-active{transition: all 1s linear;
}
/* 离开完成 */
.fade-leave-to{background:skyblue;width:0px;height:0px;
}
</style>
效果如图所示

一共有 6 个应用于进入与离开过渡效果的 CSS class。
-
v-enter-from:进入动画的起始状态。在元素插入之前添加,在元素插入完成后的下一帧移除。
-
v-enter-active:进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加,在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
-
v-enter-to:进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时),在过渡或动画完成之后移除。
-
v-leave-from:离开动画的起始状态。在离开过渡效果被触发时立即添加,在一帧后被移除。
-
v-leave-active:离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加,在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
-
v-leave-to:离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时),在过渡或动画完成之后移除。
使用vue使用animate.css动画
动画地址https://animate.style/
你也可以向 < Transition > 传递以下的 props 来指定自定义的过渡 class:
enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class
通过自定义class 结合css动画库animate css
安装库 npm install animate.css
引入 import ‘animate.css’
使用方法
<template><div style="margin-top: 200px;margin-left: 200px;"><div><button @click="show = !show">切换动画</button></div><div><!-- <Transition name="fade"><p v-show="show">测试动画</p></Transition> --><transitionleave-active-class="animate__animated animate__bounceInLeft"enter-active-class="animate__animated animate__bounceInRight"><div v-if="show">测试动画</div></transition></div></div>
</template><script setup lang="ts">
import { ref,watch } from 'vue'
let show = ref<Boolean>(true);
</script>
动画生命周期
利用这些动画生命周期钩子 我们可以在动画执行的过程中 做一些其他事情 例如使用el-dialog弹窗时 我们可以在弹窗动画开始的时候就可以获取数据了
<Transition@before-enter="onBeforeEnter" @enter="onEnter"@after-enter="onAfterEnter"@enter-cancelled="onEnterCancelled"@before-leave="onBeforeLeave"@leave="onLeave"@after-leave="onAfterLeave"@leave-cancelled="onLeaveCancelled"
><!-- ... -->
</Transition>
// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el) {}// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el, done) {// 调用回调函数 done 表示过渡结束// 如果与 CSS 结合使用,则这个回调是可选参数done()
}// 当进入过渡完成时调用。
function onAfterEnter(el) {}// 当进入过渡在完成之前被取消时调用
function onEnterCancelled(el) {}// 在 leave 钩子之前调用
// 大多数时候,你应该只会用到 leave 钩子
function onBeforeLeave(el) {}// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el, done) {// 调用回调函数 done 表示过渡结束// 如果与 CSS 结合使用,则这个回调是可选参数done()
}// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el) {}// 仅在 v-show 过渡中可用
function onLeaveCancelled(el) {}
具体参考官网https://cn.vuejs.org/guide/built-ins/transition.html
相关文章:
vue中中的动画组件使用及如何在vue中使用animate.css
“< Transition >” 是一个内置组件,这意味着它在任意别的组件中都可以被使用,无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发: 由 v-if 所触发的切换由 v-show 所触…...
MATLAB 模型参考自适应控制 - Model Reference Adaptive Control
系列文章目录 文章目录 系列文章目录前言一、参考模型二、扰动与不确定性模型三、直接 MRAC名义模型参数更新间接 MRAC估计器模型和控制器增益参数更新学习修正参考文献 前言 模型参考自适应控制模块计算控制动作,使不确定的受控系统跟踪给定参考被控对象模型的行为…...
【如何用批处理文件实现自动编译Keil工程和C# Visual Studio工程】
如何用批处理文件实现自动编译Keil工程和C# Visual Studio工程 写个Bat 批处理文件,现自动编译Keil工程和C# Visual Studio工程。这样可以结合Python 实现复杂的操作。 编译Keil工程: echo off set UVC:\Keil_v5\UV4\UV4.exe set UV_PRO_PATHD:\worksp…...
大模型的实践应用11-“书生”通用大模型的搭建与模型代码详细介绍,以及快速使用方法
大家好,我是微学AI,今天给大家介绍一下大模型的实践应用11-“书生”通用大模型的搭建与模型代码详细介绍,以及快速使用方法。“书生” 通用大模型是上海人工智能实验室研制的大模型,并且已经开源了“书生浦语”大模型70亿参数的轻量级版本InternLM-7B。InternLM-7B模型主要…...
【开发PaaS】基于Postgresql的开发平台Supabase
Supadase是开源的。我们选择可扩展的开源工具,使其易于使用。 Supadase不是Firebase的1对1映射。虽然我们正在构建Firebase提供的许多功能,但我们不会以同样的方式进行: 我们的技术选择大不相同;我们使用的一切都是开源的&#…...
前端开启gzip优化页面加载速度
生成gizp的打包资源,可以优化页面加载速度 打包的时候开启gzip可以很大程度减少包的大小,页面大小可以变为原来的30%甚至更小,非常适合线上部署, 但还记得需要服务端支持 1、前端配置compression-webpack-plugin 先安装:npm install compres…...
用Java写一个俄罗斯方块
目录 游戏规则 小方块类:Cell 七种图形类:I、J、L、O、S、T、Z J L O S T Z 俄罗斯方块游戏主类:Tetris 效果展示 游戏规则 由小方块组成的不同形状的板块陆续从屏幕上方落下来,玩家通过调整板块的位置和方向,使它…...
应用于智慧金融的AI边缘计算盒子+AI算法软硬一体化方案
传统金融营业厅存在运营管理模式落后、资源投放不平衡、从业人员培训效果不达预期、客户体验割裂等普遍现象; 部署英码数字金融解决方案,将助力企业从传统金融模式快速向数字金融模式转变,可针对每一个客户定制个性化“一对一”服务ÿ…...
目标检测——Faster R-CNN算法解读
论文:Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks 作者:Shaoqing Ren, Kaiming He, Ross Girshick, and Jian Sun 链接:https://arxiv.org/abs/1506.01497 代码:https://github.com/rbgirsh…...
Wireshark (一)安装入门 —— 软件介绍
文章目录 Wireshark是什么?为什么要使用Wireshark?相关网络分析工具软件对比 Wireshark是什么? Wireshark是一种开源网络协议分析器,它可以捕获和分析网络中传输的数据包。 用户可以使用Wireshark来诊断网络问题、了解网络协议的…...
Web框架与Django路由层
Web框架 一 web框架 Web框架(Web framework)是一种开发框架,用来支持动态网站、网络应用和网络服务的开发。这大多数的web框架提供了一套开发和部署网站的方式,也为web行为提供了一套通用的方法。web框架已经实现了很多功能&…...
什么是CAS, 什么是AQS
文章目录 什么是CAS, 什么是AQSCASAQS 什么是CAS, 什么是AQS CAS AQS AQS 全称是AbstractQueuedSynchronizer, 是juc 下一个核心的抽象类,用于构建各种同步器和锁 比如我们熟悉的 ReentrantLock、ReadWriteLock、CountDownLatch等等是基于AQS. 首先在…...
蓝桥杯每日一题2023.12.1
题目描述 蓝桥杯大赛历届真题 - C 语言 B 组 - 蓝桥云课 (lanqiao.cn) 题目分析 对于此题目而言思路较为重要,实际可以转化为求两个数字对应的操作,输出最前面的数字即可 #include<bits/stdc.h> using namespace std; int main() {for(int i 1…...
正则表达式从放弃到入门(1):“正则表达式”是什么?
正则表达式从放弃到入门(1):“正则表达式”是什么? 本博文转载自 这是一篇”正则表达式”扫盲贴,如果你还不理解什么是正则表达式,看这篇文章就对了。 如果你已经掌握了”正则表达式”,就不用再…...
SQL解惑 - 谜题2
文章目录 一、谜题描述二、分析三、答案四、总结 一、谜题描述 创建一个记录雇员缺勤率的数据库。使用的表结构如下:Absenteeism 主键:PRIMARY KEY (emp_id, absent_date) 字段名字段类型字段中文名字段描述emp_idINTERGER雇员id-absent_dateSTRING缺勤…...
FWT+高维前缀和:Gym - 103202M
https://vj.imken.moe/contest/597216#problem/F 考虑两个人的集合分别为 i , j i,j i,j,那么我们令 f ( i ⊗ j ) f(i\otimes j) f(i⊗j),其中 f ( s ) f(s) f(s) 表示两个人不同集合恰好为 s s s,显然 f ( s ) f(s) f(s) 可以FWT求…...
【C++】string类的接口综合运用
目录 介绍: 一,string对象的构建 二,string类对象的容量操作 介绍: string容器我们之前已经粗略了解了基本增添、修改、删除、插入等基本功能,这里就不再做过多说明,接下来我们全面并详细…...
分布式ID生成框架Leaf升级踩坑
背景: 在项目中需要一个统一的拿单号等唯一ID的服务,就想起了之前用到的leaf,但是因为项目要求,leaf的版本不符合,需要做一些升级 项目地址:https://github.com/Meituan-Dianping/Leaf 升级点࿱…...
常用的设计模式
文章目录 常用的设计模式:一、单例模式3、懒汉式 - 懒汉式非线程安全4、饿汉式 - 线程安全5、懒汉式和饿汉式区别6、双重检查锁定7、应用场景 二、工厂模式1、简单工厂模式2、工厂模式3、抽象工厂4、总结 三、代理模式1、静态代理2、动态代理jdk自带动态代理 3、Cgl…...
git的相关实用命令
参看文章:https://blog.csdn.net/qq_21688871/article/details/130158888 http://www.mobiletrain.org/about/BBS/159885.html 1、git commit后,但发现文件有误,不想push(提交到本地库,回退到暂存区) git reset --sof…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...
从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践
作者:吴岐诗,杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言:融合数据湖与数仓的创新之路 在数字金融时代,数据已成为金融机构的核心竞争力。杭银消费金…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库(uthash库)提供对哈希表的操作,文章如下: C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...
