25-动画和过渡
动画和过渡
一、动画
使用css动画样式,配合vue实现动画效果。
- 编写模板
<template><div><button @click="isShow = !isShow">显示/隐藏</button><h1 v-show="isShow">你好啊</h1></div>
</template><script>
export default {name: 'Test',data() {return {isShow: true}},
}
</script>
- 编写动画样式
h1 {background-color: orange;
}/* 进入的动画 */
.come {animation: test 1s linear;
}/* 离开的动画 */
.go {animation: test 1s reverse;
}/* 定义动画 */
@keyframes test {from {transform: translateX(-100%);}to {transform: translateX(0px);}
}
- 要使用vue动画的标签使用
<transition>包裹
<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- 使用transition包裹住要使用动画的标签 --><transition><h1 v-show="isShow">你好啊</h1></transition></div>
</template>
- 将进入的动画样式改为
.v-enter-active,离开的动画改为.v-leave-active:
/* 当vue渲染transition标签内容时,vue会自动加载v-enter-active动画样式 */
.v-enter-active {animation: test 1s linear;
}/* 当transition标签内容不展示时,vue会自动使用v-leave-active动画样式离开 */
.v-leave-active {animation: test 1s reverse;
}
总结:
如果要使用css动画配合vue,需要:
- 要使用动画的内容使用
<transition>标签包裹 - 定义
.v-enter-active入场动画、.v-leave-active离场动画
如果页面中有多个<transition>,需要有不同的动画样式,可以为<transition>指定name属性:
<transition name='hello'>
</transition>
此时定义的入场动画、离场动画的v也需要被替换为指定的名称:
.hello-enter-active {.....
}
.hello-leave-active {....
}
页面刚打开时,没有动画效果,如果需要在页面打开就直接展示动画效果,需要使用appear属性设置为true:
<transition name='hello' :appear="true"></transition>
<!-- 可以简写为 -->
<transition name='hello' appear></transition>
二、 过渡
使用vue的过渡实现动画效果。
- 编写模板
<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- 使用transition包裹 --><transition name="hello" appear><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: 'Test2',data() {return {isShow: true}},
}
</script>
- 编写样式
<style scoped>
h1 {background-color: orange;
}/* 进入的起点,离开的终点 */
.hello-enter,.hello-leave-to {transform: translateX(-100%);
}/* 进入的终点,离开的起点 */
.hello-enter-to,.hello-leave {transform: translateX(0);
}.hello-enter-active,.hello-leave-active{transition: 0.5s linear;
}</style>
总结:
vue的过渡效果中:入场动画位置起点.v-enter,入场动画位置终点.v-enter-to,离场动画起点.v-leave,离场动画终点.v-leave-to。
动画的时长等需要在.v-enter-active、.v-leave-active中定义。
三、多个元素过渡
<transition>标签内只能有一个根元素,例如:
<template><transition><!-- transition内部只能有一个根元素 --><h1>hello</h1></transition>
</template>
如果需要过渡的内容是一个列表,需要使用<transition-group>,而且被包裹的元素需要有key属性:
<template><!-- 使用transition-group --><transition-group name='hello'><!-- 被包裹的标签需要有key属性 --><h1 v-show='isShow' key='1'>hello</h1><h1 v-show='isShow' key='2'>world</h1></transition-group>
</template>
四、使用第三方库
可以使用一些已经成型的封装好了的动画库,例如Animate.css。
安装Animate:
npm i animate.css
引入animate库:
<script>
import 'animate.css' // 引入样式库
</script>
在模板中直接库里面的样式即可,无需再自己定义样式:
name属性必须为animate__animated animate__bounce,
enter-active-class定义入场动画,leave-active-class定义离场动画,动画名称可以在animate.css官网复制
<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition appearname="animate__animated animate__bounce" enter-active-class="animate__swing"leave-active-class="animate__backOutUp"> <h1 v-show="isShow">你好啊</h1></transition></div>
</template>
先赞后看,养成习惯!!!^ _ ^ ❤️ ❤️ ❤️
码字不易,大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦!
相关文章:
25-动画和过渡
动画和过渡 一、动画 使用css动画样式,配合vue实现动画效果。 编写模板 <template><div><button click"isShow !isShow">显示/隐藏</button><h1 v-show"isShow">你好啊</h1></div> </templa…...
Linux 操作系统原理 — 虚拟内存管理
目录 文章目录 目录虚拟内存技术页式内存管理技术x86_32 CPU 虚拟内存虚拟地址格式与内核页表虚拟内存空间Kernel SpaceUser Spacex86_64 CPU 虚拟内存虚拟地址格式与内核页表(四级页表)虚拟内存空间TLB 缓冲(快表)进程页表虚拟内存技术 虚拟内存技术是操作系统实现的一种…...
保持超低温环境新方法:功耗降至十分之一!
(图片来源:网络)量子比特是量子计算机的主要构建部分,然而热量会导致量子比特容易出错,因此量子系统通常保存在超低温稀释制冷机内,可以将温度保持在绝对零度(−273.15℃)以上。但是…...
论文投稿指南——中文核心期刊推荐(音乐)
【前言】 🚀 想发论文怎么办?手把手教你论文如何投稿!那么,首先要搞懂投稿目标——论文期刊 🎄 在期刊论文的分布中,存在一种普遍现象:即对于某一特定的学科或专业来说,少数期刊所含…...
es-10搜索推荐suggest
搜索推荐:Suggest 概述 搜索一般都会要求具有“搜索推荐”或者叫“搜索补全”的功能,即在用户输入搜索的过程中,进行自动补全或者纠错。以此来提高搜索文档的匹配精准度,进而提升用户的搜索体验,这就是Suggest。 四…...
VMware ESXi 7.0 Update 3k - 领先的裸机 Hypervisor (sysin Custom Image)
VMware ESXi 7.0 Update 3k - 领先的裸机 Hypervisor (sysin Custom Image) VMware ESXi 7.0 Update 3k Standard & All Custom Image for ESXi 7.0 U3k Install CD 请访问原文链接:https://sysin.org/blog/vmware-esxi-7-u3/,查看最新版。原创作品…...
JVM整体分析篇
这里写目录标题JVM的组成部分1.类装载子系统1.1一个类加载到JVM的过程1.2类加载机制1.3为什么设计双亲委派机制1.4怎么打破双亲委派机制2.运行时数据区2.1线程私有及共享2.2JVM内存区结构2.3JVM参数设置经验3.Java对象的生命周期3.1.对象的创建3.2.对象大小的计算(6…...
【Python入门第十七天】Python While 循环
Python 循环 Python 有两个原始的循环命令: while 循环for 循环 while 循环 如果使用 while 循环,只要条件为真,我们就可以执行一组语句。 实例 只要 i 小于 7,打印 i: i 1 while i < 7:print(i)i 1运行实…...
怎样激发读者好奇心?短视频营销之场景化
目录 激发读者好奇心?四个小技巧帮你搞定 1.省略法 2.欲言又止法: 3.问句法:就是用疑问的形式引起别人的好奇。 4.反差法 选择合适的主题。 利用场景化效果 使用滤镜。 如何提高用户的留存率。 1、设置一个有趣的话题。 2、用好道具。 3、多用竖屏。 什…...
【LeetCode】剑指 Offer 14- II. 剪绳子 II p96 -- Java Version
题目链接:https://leetcode.cn/problems/jian-sheng-zi-ii-lcof/ 1. 题目介绍(14- II. 剪绳子 II) 给你一根长度为 n 的绳子,请把绳子剪成整数长度的 m 段(m、n都是整数,n>1并且m>1)&…...
【红黑树】红黑树插入操作相关的细节和疑难拆解分析
本文就红黑树的插入操作进行细致到每一个小步骤的解析。1,成员变量本红黑树使用了三叉链结构,使用的时候尤其要记得处理指向父亲的指针。为何在节点的构造函数中,默认节点的颜色为红色?因为考虑到红黑树的性质(对于每个…...
字符串匹配--strstr函数的模拟实现思路和代码
一,strstr函数 原型: const char * strstr ( const char * str1, const char * str2 );char * strstr ( char * str1, const char * str2 ); strstr是一个字符串匹配函数,在str1中去寻找str2,如果找到,返回str2在…...
【ArcGIS Pro二次开发】(7):地图(Map)的基本操作
地图是ArcGIS Pro中的基础起点,也是大多数工程的基础。主要用于显示表示空间数据的图层。 一、地图(Map)的基本操作示例 1、获取当前地图 var map MapView.Active.Map; 2、获取一级图层 var lys map.Layers; 用于获取地图中的单一图层,以及图层组…...
python 自动化测试 pytest 的使用
pytest 是一款以python为开发语言的第三方测试,主要特点如下: 比自带的 unittest 更简洁高效,兼容 unittest框架 支持参数化 可以更精确的控制要测试的测试用例 丰富的插件,已有300多个各种各样的插件,也可自定义扩…...
闭包(回顾)
概念作用保护作用保存作用优缺点命名空间 概念 闭包(closure)指有权访问另一个函数作用域中变量的函数 — Javacript高级程序设计 p309 简单理解,一个作用域可以访问另一个函数内部的私有变量 // 其中 test就是一个闭包 function fn(){var num 10function test …...
利用好这两个方法,服务型企业缺成本票不再难解决!
现代服务业属于人才密集型和技术型类别,其中囊括了不少技术,知识,智力服务等产业:信息技术,文化创意,营销策划,广告设计,以及咨询,商务和法律服务。 在金税三期完善之前…...
前端面试编程题(异步调度,Promise实现、占用空间大小、渲染虚拟节点、实现for of)
目录 异步调度问题 题目一 答案 题目二 答案 递归输出 题目一 答案 Promise相关 题目一 答案 占用空间大小 题目一 答案 渲染虚拟节点 题目一 答案 实现for of 题目一 答案 异步调度问题 题目一 1.实现一个带并发限制的异步调度Scheduler,保证同…...
复旦团队发布国内首个模型MOSS 类ChatGPT
复旦团队发布国内首个模型MOSS 类ChatGPT 首先看到这个标题,还有这个名字,我是正经(zhen jing)的 (bu shi 流浪地球?550W?不了解的可以把550W倒过来写,就懂了 看到新闻里的一些图…...
5.35 综合案例2.0 -称重数据上传云端
综合案例2.0 - 称重数据上传云端案例说明连线功能实现1.阿里云平台连接代码应用开发3.1新建‘普通项目’3.2关联产品和设备3.3新建‘移动应用’3.4添加组件3.5配置组件信息3.6保存预览案例说明 使用hx711串口模块称重,结合IOT studio制作手机APP远程控制并采集物体重量。 hx7…...
如何让人机对话更自然?
来源:投稿 作者:顾相欢 编辑:学姐 AAAI-2022|定制对话的人设和知识背景 原文标题: Call for Customized Conversation: Customized Conversation Grounding Persona and Knowledge 原文链接: https://arxiv.org/ab…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日,国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解,“超级…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
【Redis】笔记|第8节|大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点: 多级缓存,先查本地缓存,再查Redis,最后才查数据库热点数据重建逻辑使用分布式锁,二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
解读《网络安全法》最新修订,把握网络安全新趋势
《网络安全法》自2017年施行以来,在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂,网络攻击、数据泄露等事件频发,现行法律已难以完全适应新的风险挑战。 2025年3月28日,国家网信办会同相关部门起草了《网络安全…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库(uthash库)提供对哈希表的操作,文章如下: C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...
日常一水C
多态 言简意赅:就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过,当子类和父类的函数名相同时,会隐藏父类的同名函数转而调用子类的同名函数,如果要调用父类的同名函数,那么就需要对父类进行引用&#…...
【SpringBoot自动化部署】
SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一,能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时,需要添加Git仓库地址和凭证,设置构建触发器(如GitHub…...
