Vue3实现过渡动画

认识动画

  • 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验:
  1. React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动画我们需要使用一个第三方库 react-transition-group;
  2. Vue中为我们提供一些内置组件和对应的API来完成动画,利用它们我们可以方便的实现过渡动画效果;
  • 我们来看一个案例:
  1. Hello World的显示和隐藏;
  2. 通过下面的代码实现,是不会有任何动画效果的;
  • 没有动画的情况下,整个内容的显示和隐藏会非常的生硬:
  1. 如果我们希望给单元素或者组件实现过渡动画,可以使用 transition 内置组件来完成动画;

Vue的transition动画

  • 条件渲染 (使用 v-if)条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点

过渡动画class

  • v-enter-from:定义进入过渡的开始状态。
  1. 在元素被插入之前生效,在元素被插入之后的下一帧移除。
  • v-enter-active:定义进入过渡生效时的状态。
  1. 在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线
    函数。
  • v-enter-to:定义进入过渡的结束状态。
  1. 在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除),在过渡/动画完成之后移除。
  • v-leave-from:定义离开过渡的开始状态。
  1. 在离开过渡被触发时立刻生效,下一帧被移除。
  • v-leave-active:定义离开过渡生效时的状态。
  1. 在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟
    和曲线函数。
  • v-leave-to:离开过渡的结束状态。
  1. 在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除),在过渡/动画完成之后移除

示例代码

<template><div class="app"><div><button @click="isShow = !isShow" >切换</button></div><transition name="why"><h2 v-if="isShow">哈哈哈</h2></transition></div>
</template><script setup>import { ref } from 'vue';const isShow = ref(false)
</script>
<style scoped>
h2{display: inline-block;
}
.why-enter-from,.why-leave-to{opacity: 0;transform: scale(0.6);
}.why-enter-to,.why-leave-from{opacity: 1;transform: scale(1);
} .why-enter-active,.why-leave-active{transition:all 2s ease;
}
</style>

过渡css动画

  • 前面我们是通过transition来实现的动画效果,另外我们也可以通过animation来实现。

示例代码

<template><div class="app"><div><button @click="isShow = !isShow">切换</button></div><transition name="why"><h2 v-if="isShow">要是有些事我没说,地坛,你别以为是我忘了,我什么也没忘,但是有些事只适合收藏。不能说,也不能想,却又不能忘。它们不能变成语言,它们无法变成语言,一旦变成语言就不再是它们了。它们是一片朦胧的温馨与寂寥,是一片成熟的希望与绝望,它们的领地只有两处:心与坟墓。比如说邮票,有些是用于寄信的,有些仅仅是为了收藏。</h2></transition></div>
</template><script setup>
import { ref } from 'vue';
const isShow = ref(false)
</script>
<style scoped>
h2{display: inline-block;
}
.why-enter-active{animation: whyAnim 2s ease;
}
.why-leave-active{/* animation: whyLeaveAnim 2s ease; */animation: whyAnim 2s ease reverse;
}@keyframes whyAnim {0%{transform: scale(0);opacity: 0;}50%{transform: scale(1.2);opacity: 0.5;}100%{transform: scale(1);opacity: 1;}
}@keyframes whyLeaveAnim {0%{transform: translateX(0);opacity: 1;}100%{transform: translateX(-500px);opacity: 0;}
}
</style>

同时设置过渡和动画(一般不设置)

  • Vue为了知道过渡的完成,内部是在监听 transitionend 或 animationend,到底使用哪一个取决于元素应用的CSS规则:
  1. 如果我们只是使用了其中的一个,那么Vue能自动识别类型并设置监听;
  • 但是如果我们同时使用了过渡和动画呢?
  1. 并且在这个情况下可能某一个动画执行结束时,另外一个动画还没有结束;
  2. 在这种情况下,我们可以设置 type 属性为 animation 或者 transition 来明确的告知Vue监听的类型;
    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

显示的指定动画时间

  • 我们也可以显示的来指定过渡的时间,通过 duration 属性。
  • duration可以设置两种类型的值:
  1. number类型:同时设置进入和离开的过渡时间;
  2. object类型:分别设置进入和离开的过渡时间;

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

过渡的模式mode

  • 如果动画在两个元素之间切换的时候会存在问题:

  • 我们会发现 Hello World 和 你好啊,李银河是同时存在的:

  1. 这是因为默认情况下进入和离开动画是同时发生的;
  2. 如果确实我们希望达到这个的效果,那么是没有问题;
  • 但是如果我们不希望同时执行进入和离开动画,那么我们需要设置transition的过渡模式:
  1. in-out: 新元素先进行过渡,完成之后当前元素过渡离开;
  2. out-in: 当前元素先进行过渡,完成之后新元素过渡进入;

** 示例代码 **

<template><div class="app"><div><button @click="isShow = !isShow">切换</button></div><!-- mode属性掌握 --><transition name="why" mode="out-in"><h2 v-if="isShow">哈哈哈</h2><h2 v-else>呵呵呵</h2></transition></div>
</template><script setup>import { ref } from 'vue'const isShow = ref(true)
</script><style scoped>
h2{display: inline-block;
}/* transition */
.why-enter-from,.why-leave-to{opacity: 0;
}
.why-enter-to,.why-leave-from{opacity: 1;
}
.why-enter-active{animation:whyAnim 2s ease;transition:opacty 2s ease;
}
.why-leave-active{animation:whyAnim 2s ease reverse;transition:opacity 2s ease;
}
@keyframes whyAnim{0%{transform: scale(0);}50%{transform:scale(1.2)}100%{ transform: scale(1);}
}
</style>

动态组件的切换

上面的示例同样适用于我们的动态组件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

appear初次渲染

默认情况下,首次渲染的时候是没有动画的,如果我们希望给他添加上去动画,那么就可以增加另外一个属性appear:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

示例代码

<template><div class="app"><div><button @click="isShow = !isShow">切换</button></div><!-- mode 属性掌握 --><transition name="why" mode="out-in" appear=""><component :is="isShow ? 'home' : 'about'"></component></transition></div>
</template><script>  import Home from './Home.vue'import About from './About.vue'export default{components:{Home,About}}
</script><script setup>import { ref } from 'vue'const isShow = ref(true)
</script><style scoped>
h2{display: inline-block;
}/* transition */
.why-enter-from,.why-leave-to{opacity: 0;
}.why-enter-to,.why-leave-from{opacity: 1;
}.why-enter-active{animation: whyAnim 2s ease;transition:opacity 2s ease;
}
.why-leave-active{animation:whyAnim 2s ease reverse;transition:opacity 2s ease;
}@keyframes whyAnim{0%{transform: scale(0);}50%{transform: scale(1.2);}100%{ transform: scale(1);}
}
</style>

认识列表的过渡

  • 目前为止,过渡动画我们只要是针对单个元素或者组件的:
  1. 要么是单个节点;
  2. 要么是同一时间渲染多个节点中的一个;
  • 那么如果希望渲染的是一个列表,并且该列表中添加删除数据也希望有动画执行呢?
  1. 这个时候我们要使用 组件来完成;
  • 使用 有如下的特点:
  1. 默认情况下,它不会渲染一个元素的包裹器,但是你可以指定一个元素并以 tag attribute 进行渲染;
  2. 过渡模式不可用,因为我们不再相互切换特有的元素;
  3. 内部元素总是需要提供唯一的 key attribute 值;
  4. CSS 过渡的类将会应用在内部的元素中,而不是这个组/容器本身;
  • 我们来做一个案例:
  1. 案例是一列数字,可以继续添加或者删除数字;
  2. 在添加和删除数字的过程中,对添加的或者移除的数字添加动画

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

示例代码

<template><div class="app"><button @click="addNumber">添加数字</button><button @click="removeNumber">删除数字</button><button @click="shuffleNumber">打乱数字</button><transition-group tag="div" name="why"><template v-for="item in nums" :key="item"><span>{{ item }}</span></template></transition-group></div>
</template><script setup>
import { reactive,ref } from 'vue';
import { shuffle } from "underscore"const nums = ref([0,1,2,3,4,5,6,7,8,9])
const addNumber = () =>{nums.value.splice(randomIndex(),0,nums.value.length)
}
const removeNumber = () => {nums.value.splice(randomIndex(),1)
}
const shuffleNumber = () => {nums.value = shuffle(nums.value)
}
const randomIndex = () => {return Math.floor(Math.random() * nums.value.length)
}
</script> <style scoped>span{margin-right: 10px;display: inline-block;}.why-enter-from,.why-leave-to{opacity: 0;transform: translateY(30px);}.why-enter-to,.why-leave-from{opacity: 1;transform: translateY(0);}.why-enter-active,.why-leave-active{transition: all 2s ease;}.why-leave-active{position: absolute;}/* 针对其他移动的阶段需要的动画 */.why-move{transition: all 2s ease; }
</style>

** 感谢大家观看,我们下次再见 **

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

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

相关文章

【高中数学/极值问题】一条长为L的绳子,一面靠墙,另外三边组成矩形,问此矩形最大面积能是多少?

【问题】 一条长为L的绳子&#xff0c;一面靠墙&#xff0c;另外三边组成矩形&#xff0c;问此矩形最大面积能是多少&#xff1f; 【示意图】 【解析式】 设垂直于墙的两边长为x&#xff0c;则墙对边长为L-2x&#xff0c;围成的矩形面积Sx(L-2x) 写成标准的解析式为yx(L-2…

本地Windows电脑 连接 Windows 服务器

Windows电脑 连接 Windows 服务器 方式1&#xff1a;直接搜索 在电脑的搜索栏&#xff0c;输入“远程桌面连接” 可以选择点击 “打开” 或者直接按 回车键 “Enter”&#xff0c;打开 远程桌面连接 方式2&#xff1a;运行框打开服务器连接 同时按&#xff1a;Windows徽标键…

java+springboot+Mysql“友书”综合书籍平台系统24489-计算机毕业设计项目选题推荐(附源码)

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;“友书”综合书籍平台当然也不能排除在外。“友书”综合书籍平台系统是以实际运用为开发背景&#xff0c;运用软件工程原…

搜维尔科技:详谈ART的工具追踪技术

您的生产流程中是否已经受益于刀具跟踪系统&#xff1f;您是否意识到它们的价值&#xff1f;因为它们可以优化您的装配顺序&#xff0c;从而节省您的时间和金钱。 目前我们提供两种工具跟踪解决方案&#xff1a; 1.ART与 VERPOSE的解决方案——易于使用的图像识别 安装在工…

UE5 05-利用 timeline 插值运动

理解成 unity Dotween DoMove 插值运动即可 AddTimeLine 节点 物体插值运动 物体插值缩放 一个timeline 可以K多个动画帧

基于STM32F103C8T6的同步电机驱动-CubeMX配置与IQmath调用

基于STM32F103C8T6的同步电机驱动-CubeMX配置与IQmath调用 一、功能描述: 上位机通过CAN总线实现对电机的运动控制,主要包含三种模式:位置模式、速度模式以及力矩模式。驱动器硬件核心为STM32F103C8T6,带相电压采集电路以及母线电压采集电路。其中供电电压12V。 PWM中心对…

DT浏览器很好用

DT浏览器是一款简单的浏览器&#xff0c;又是强大的浏览器&#xff0c;界面简洁大方&#xff0c;软件使用流畅。DT浏览器的网址收藏&#xff0c;人工智能写作&#xff0c;书法笔记等功能与众不同。DT浏览器的图文识别功能和笔记本搭配使用&#xff0c;可以对内容编辑修改和保存…

RestTemplate、MockMVC、Swagger

rest代码风格 硬编码的部分在实际开发中都是会替换成枚举对象 SpringMVC会自动把json格式的post请求转化为对应接收的 对象 响应请求时&#xff0c;也会自动把 对象转化为 json格式的 RestTemplate 浏览器的地址栏只能提供get请求访问后端&#xff0c;如果要使用post方式发送…

[A-03] ARMv8/ARMv9-多级Cache架构

ver 0.1 前言 前面文章我介绍了Cache的基本架构、Cache的详细的结构&#xff0c;有了一定的cache的基础&#xff0c;对cache机制也有了sense。实际上Cache作为CPU架构中存储机制的核心组件和CPU的微架构以及系统的总线架构还是密切相关的&#xff0c;不同的体系下&#xff0c…

传统数据处理系统存在的问题

传统应用的数据系统架构设计时&#xff0c;应用直接访问数据库系统。当用户访问量增加时&#xff0c;数据库无法支撑日益增长的用户请求的负载&#xff0c;从而导致数据库服务器无法及时响应用户请求&#xff0c;出现超时的错误。 出现这种情况以后&#xff0c;在系统架构上就采…

【Axure高保真原型】中继器表格——移入显示详情卡片案例

今天和大家分享中继器表格——移入显示详情卡片的原型模板&#xff0c;鼠标移入员工号或姓名会弹出员工卡片&#xff0c;可以查看更详细的信息。这个表格是用中继器制作的&#xff0c;所以使用也很方便&#xff0c;只需要维护中继器表格里的信息&#xff0c;即可自动生成交互效…

第一百四十二节 Java数据类型教程 - Java字符数据类型

Java数据类型教程 - Java字符数据类型 Character类的一个对象包装一个char值。 字符类包含isLetter()和isDigit()方法来检查字符是否为字母和数字。 toUpperCase()和toLowerCase()方法将字符转换为大写和小写。 该类提供了一个构造函数和一个工厂valueOf()方法来从char创建对…

Kubernetes云原生存储解决方案openebs部署实践-4.0.1版本(helm部署)

Kubernetes云原生存储解决方案openebs部署实践-4.0.1版本&#xff08;helm部署&#xff09; 简介 OpenEBS 是一种开源云原生存储解决方案。OpenEBS 可以将 Kubernetes 工作节点可用的任何存储转化为本地或复制的 Kubernetes 持久卷。OpenEBS 帮助应用和平台团队轻松地部署需要…

深度学习图像生成与分割模型详解:从StyleGAN到PSPNet

文章目录 Style GANDeeplab-v3FCNAdversarial AutoencodersHigh-Resolution Image Synthesis with Latent Diffusion ModelsNeRF: Representing Scenes as Neural Radiance Fields for View SynthesisPyramid Scene Parsing Network Style GAN 输入是一个潜在向量 (z)&#xff…

[激光原理与应用-98]:南京科耐激光-激光焊接-焊中检测-智能制程监测系统IPM介绍 - 2 - 什么是激光器焊接

目录 一、什么是激光焊接 1.1 概述 1.2 激光焊接的优点 二、激光焊接的应用 2.1 哪些场合必须使用激光焊接 1. 汽车制造业 2. 航空航天领域 3. 电子行业&#xff1a;消费类电子3C 4. 医疗器械制造 5. 新能源锂电池行业 6. 其他领域 三、激光焊接的分类 3.1 按焊接…

【靶机实战】Apache Log4j2命令执行漏洞复现

# 在线靶场 可以通过访问极核官方靶场开启靶机实验&#xff1a;极核靶场 -> 漏洞复现靶场 -> Log4j2-RCE 原文&#xff1a;【靶机实战】Apache Log4j2命令执行漏洞复现 - 极核GetShell (get-shell.com) # 简介 Apache Log4j2 是一个广泛使用的 Java 日志记录库&#…

【ROS2】初级:CLI工具- 理解话题(或主题)

理解话题 目标&#xff1a;使用 rqt_graph 和命令行工具来内省 ROS 2 话题。 教程级别&#xff1a;初学者 时间&#xff1a;20 分钟 目录 背景 先决条件 任务 设置2 rqt_graph3 ros2 话题列表4 ros2 话题回声5 ros2 话题信息6 ros2 接口显示7 ros2 话题发布8 ros2 话题赫兹 清理…

技术革新引领钢材质量智能化检测新纪元,基于YOLOv5全系列【n/s/m/l/x】参数模型开发构建钢材工业生产场景下钢材缺陷智能检测识别系统

随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;其应用领域不断拓宽&#xff0c;正深刻改变着传统产业的运作模式。在钢材生产这一基础工业领域&#xff0c;AI的引入正为钢材的质量检测带来革命性的变革。 在传统的钢材生产流程中&#xff0c;质量检测是确…

基于Bootstrap Blazor开源的.NET通用后台权限管理系统

前言 今天大姚给大家分享一个基于Bootstrap Blazor开源的.NET通用后台权限管理系统&#xff0c;后台管理页面兼容所有主流浏览器&#xff0c;完全响应式布局&#xff08;支持电脑、平板、手机等所有主流设备&#xff09;&#xff0c;可切换至 Blazor 多 Tabs 模式&#xff0c;…

打破数据生产力的桎梏,打造数据分析驱动的新型组织

在当前的经济环境下&#xff0c;各行业面临着前所未有的挑战&#xff0c;降本增效成为企业普遍追求的目标。数字化转型被视为实现这一目标的关键路径。通过数字化手段&#xff0c;企业能够探索新的增长机会&#xff0c;提升运营效率&#xff0c;并有效控制成本支出。在这一转型…