当前位置: 首页 > news >正文

vue内置组件Transition的详解

1. Transition定义

Vue 提供了两个内置组件,可以帮助你制作基于状态变化的过渡和动画:
<Transition>会在一个元素或组件进入和离开 DOM 时应用动画。
<TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入,移动,或移除时应用动画。

简单地说,就是当元素发生变化,比如消失、显示时,添加动画让它更自然过渡。它是vue内置组件,不需要引入注册就可以直接使用。

在什么情况会出现过渡?
1.v-if切换
2. v-show切换
3. 动态组件component切换
4. 改变特殊的key属性

前几个比较好理解,最后一个用到了key值变化导致元素强制更新。下面例子的key值变化,vue会认为这里产生了一个新元素,之前的会被删除,从而导致过渡。

<script setup>
import { ref } from 'vue'const keyValue = ref(1)
</script><template><button @click="() =>keyValue = Math.random()">Toggle</button><Transition ><p :key="keyValue">hello</p></Transition>
</template><style>
.v-enter-active,
.v-leave-active {transition: opacity 0.5s ease;
}.v-enter-from,
.v-leave-to {opacity: 0;
}
</style>

2. 添加过渡效果

如果不给命名的话,添加动画效果的默认类名前缀是v-
图片来自vue官网

v-enter-active :进入动画的生效状态
v-leave-active:离开动画的生效状态
v-enter-from :刚进入动画的开始状态
v-leave-to离开动画时的结束状态
v-enter-to :刚进入动画的结束状态
v-leave-from :离开动画的结开始态
一般前4种用得比较多,两个生效状态,加上进入动画的开始状态和离开动画时的结束状态。

3. 自定义过渡类名

通过name可以自定义<Transition>的过渡类名。

<Transition name="a">...
</Transition>
.a-enter-active,
.a-leave-active {transition: opacity 0.5s ease;
}.a-enter-from,
.a-leave-to {opacity: 0;
}

注意:里面只能有一个根组件,但使用v-if、v-else、v-else-if切换显示是可以的。
如果想对列表中的元素设置过渡,可以使用<TransitionGroup >

4. 深层元素的过渡

可以给深层级的元素设置过渡效果。

<Transition name="fade"><div v-if="show" class="outer"><div class="inner">Hello</div></div>
</Transition>
/* 应用于嵌套元素的规则 */
.fade-enter-active .inner,
.fade-leave-active .inner {transition: all 0.3s ease-in-out;
}.fade-enter-from .inner,
.fade-leave-to .inner {transform: translateX(30px);opacity: 0;
}

duration属性设置过渡持续的时间,单位是毫秒。

<Transition :duration="550">...</Transition>

5. 过渡的钩子函数

<Transition@before-enter="onBeforeEnter"@enter="onEnter"@after-enter="onAfterEnter"@enter-cancelled="onEnterCancelled"@before-leave="onBeforeLeave"@leave="onLeave"@after-leave="onAfterLeave"@leave-cancelled="onLeaveCancelled"
>
...
<<Transition>

6. 封装过渡效果

<!-- MyTransition.vue -->
<script>
// JavaScript 钩子逻辑...
</script><template><!-- 包装内置的 Transition 组件 --><Transitionname="my-transition"@enter="onEnter"@leave="onLeave"><slot></slot> <!-- 向内传递插槽内容 --></Transition>
</template><style>
</style>

注意:该组件样式不要添加scoped , 不然插槽内没有过渡效果。

<MyTransition><div v-if="show">Hello</div>
</MyTransition>

7. 过渡模式

可以设置属性modeout-inin-out
in-out表示当前元素先进行过渡,完成之后新元素过渡进入。
通常我们更多的会使用out-in,让当前元素先离开,然后再进行新元素的进入 。

相关文章:

vue内置组件Transition的详解

1. Transition定义 Vue 提供了两个内置组件&#xff0c;可以帮助你制作基于状态变化的过渡和动画&#xff1a; <Transition>会在一个元素或组件进入和离开 DOM 时应用动画。 <TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入&#xff0c;移动&#xff0…...

中秋节听夜曲,Android OpenGL 呈现周董专属的玉兔主题音乐播放器

概述 前几天发现QQ音乐有个好玩的功能&#xff0c;为用户提供了多种 播放器主题&#xff0c;其中 原神 的主题让我眼前一亮&#xff1a; 当然&#xff0c;诸如 换肤、主题 类的功能已经屡见不鲜&#xff0c;但这类沉浸式播放器的听歌体验确实不错。 见猎心喜&#xff0c;正好…...

008_第一代软件系统架构

第一代软件系统架构 文章目录 第一代软件系统架构项目介绍软件架构和软件构架系统框架硬件组成运行系统基础库软件层 系统架构 关键字&#xff1a; Qt、 Qml、 关键字3、 关键字4、 关键字5 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&…...

oracle客户端的安装(SQL Developer)

参考资料 软件首页&#xff1a;https://www.oracle.com/database/sqldeveloper/ 官方文档&#xff1a;https://docs.oracle.com/en/database/oracle/sql-developer/ 下载地址&#xff1a;https://www.oracle.com/database/sqldeveloper/technologies/download/ 安装指南&#…...

Mysql索引优化1

关闭查询缓存 set global query_cache_size 0; set global query_cache_type 0; force index&#xff08;索引&#xff09;where 条件 强制走索引 一般不推荐&#xff0c;因为mysql结构中会通过cost计算出最优sql路线 索引下推 5.6之前 会先从辅助索引表也就是二级索引…...

Spring常考知识点(IOC、事务、容器等)

作者&#xff1a;逍遥Sean 简介&#xff1a;一个主修Java的Web网站\游戏服务器后端开发者 主页&#xff1a;https://blog.csdn.net/Ureliable 觉得博主文章不错的话&#xff0c;可以三连支持一下~ 如有需要我的支持&#xff0c;请私信或评论留言&#xff01; Spring需要理解的问…...

Leetcode 2867. Count Valid Paths in a Tree

Leetcode 2867. Count Valid Paths in a Tree 1. 解题思路2. 代码实现 题目链接&#xff1a;2867. Count Valid Paths in a Tree 1. 解题思路 这一题思路上的话由于要求路径上有且仅有一个质数点&#xff0c;因此&#xff0c;一个直接的思路就是考察所有质数的点作为中心点时…...

Jtti:Ubuntu下如何创建XFS文件系统的LVM

在 Ubuntu 下创建一个 XFS 文件系统的 LVM&#xff08;Logical Volume Manager&#xff09;分区需要一系列步骤。以下是详细的步骤&#xff1a; 1. 创建物理卷 (PV) 首先&#xff0c;将要用于 LVM 的硬盘分区&#xff08;物理卷&#xff09;初始化为物理卷。假设你有一个硬盘…...

做销售管理分析需要看哪些关键指标?

做销售管理分析需要看哪些关键指标&#xff1f; 销售管理分析时抓取关键指标&#xff0c;有着能够【分析和判断销售趋势、为销售决策提供数据支持、优化销售流程和客户管理】等的好处 在了解了分析关键指标的目的之后&#xff0c;我们就可以根据企业的需求来确定关键指标&…...

【Python】自动完成手写字体图片贴入以及盖章工具

简介 该工具完成了如下功能&#xff1a; 1.将文字转换为手写体填入到模板文件中 2.自动将文字转换为盖章格式填入到模板文件中 3.字体格式可以替换 4.有配置文件进行扩展功能 功能模块 1.界面模块 import sys from PyQt5.QtWidgets import QApplication, QMessageBox, QWid…...

基于Xml方式Bean的配置-初始化方法和销毁方法

SpringBean的配置详解 Bean的初始化和销毁方法配置 Bean在被实例化后&#xff0c;可以执行指定的初始化方法完成一些初始化的操作&#xff0c;Bean在销毁之前也可以执行指定的销毁方法完成一些操作&#xff0c;初始化方法名称和销毁方法名称通过 <bean id"userService…...

实时更新进度条:JavaScript中的定时器和异步编程技巧

前言 在Web开发中&#xff0c;有许多场景需要实时地更新页面上的进度&#xff0c;例如上传文件、数据处理等。本文将介绍如何利用JavaScript中的定时器和异步编程技巧来实现实时更新进度&#xff0c;并探讨一些其他解决方案。 处理进度实时更新&#xff1a; 利用异步编程实现实…...

【简单图论】CF898 div4 H

Problem - H - Codeforces 题意&#xff1a; 思路&#xff1a; 手玩一下样例就能发现简单结论&#xff1a; v 离它所在的树枝的根的距离 < m 离这个根的距离时是 YES 否则就是NO 实现就很简单&#xff0c;先去树上找环&#xff0c;然后找出这个根&#xff0c;分别给a 和…...

【大虾送书第十一期】适合新手自学的网络安全基础技能“蓝宝书”:《CTF那些事儿》

目录 &#x1f96e;写在前面 &#x1f96e;内容简介 &#x1f96e;读者对象 &#x1f96e;专家推荐 &#x1f96e;目录 &#x1f96e;文末福利 &#x1f990;博客主页&#xff1a;大虾好吃吗的博客 &#x1f990;专栏地址&#xff1a;免费送书活动专栏地址 写在前面 CTF比赛是快…...

IDEA安装离线插件后重启无法打开

解决方法 1.找到插件安装目录删除插件 插件的位置一般在C:\Users\19058\AppData\Roaming\JetBrains\IntelliJIdea2021.1\plugins 高亮部分是自己电脑的用户位置&#xff0c;把报错前的刚才最新安装的插件删除&#xff0c;再尝试打开idea即可解决该问题 2.补充说明 AppData是个隐…...

论软件的可靠性设计

摘要 2021年6月&#xff0c;我所在的公司中标某集团保险大数据平台一体化研发项目&#xff0c;该项目总投资2000万人民币&#xff0c;项目周期为2年&#xff0c;通过该项目&#xff0c;搭建该集团保险大数据平台&#xff0c;一方面将全国所有保险业务全部入库并保存&#xff0…...

AG35学习笔记(一):debug串口抓取模组log、debug串口测试AT指令、echo命令通过串口发送16进制数据

目录 一、概述二、抓取模组log2.1 硬件接口2.2 用户登录2.3 相关指令 三、测试AT指令3.1 查看端口3.2 进入模式 四、串口发16进制echo使用 一、概述 二、抓取模组log 在之前记录了通过USB&#xff0c;使用移远工具Qwinlog来抓取log&#xff08;3.3 抓取模组log&#xff09;。…...

Python进阶学习----一闭三器

目录 ​编辑 前言 一.三器 1. 迭代器&#xff08;Iterator&#xff09; 1.1 什么是可迭代对象 1.2什么是迭代器 1.3案例演示&#xff1a; 以下是一个简单的迭代器示例&#xff0c;遍历一个列表并打印每个元素&#xff1a; 1.4迭代器总结 2. 生成器&#xff08;Generat…...

C/S架构学习之TCP客户端

TCP客户端的实现流程&#xff1a;一、创建套接字&#xff08;socket函数&#xff09;&#xff1a;通信域选择IPV4网络协议、流式套接字&#xff1b; int sockfd socket(AF_INET,SOCK_STREAM,0); 二、填充服务器的网络信息结构体&#xff08;struct sockaddr_in serveraddr&…...

系统集成|第十二章(笔记)

目录 第十二章 沟通管理12.1 沟通的基本概念12.2 主要过程12.2.1 规划沟通管理12.2.2 管理沟通12.2.3 控制沟通 12.3 常见问题 上篇&#xff1a;第十一章、项目人力资源管理 第十二章 沟通管理 沟通管理在项目计划、执行、监控过程中具有重要的作用&#xff0c;项目经理应该拿…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

goreplay

1.github地址 https://github.com/buger/goreplay 2.简单介绍 GoReplay 是一个开源的网络监控工具&#xff0c;可以记录用户的实时流量并将其用于镜像、负载测试、监控和详细分析。 3.出现背景 随着应用程序的增长&#xff0c;测试它所需的工作量也会呈指数级增长。GoRepl…...