Vue内置组件TransitionGroup详细介绍
<TransitionGroup>是一个内置组件,用于对v-for列表中的元素或组件的插入、移除和顺序改变添加动画效果。
和 <Transition> 的区别
<TransitionGroup>支持和<Transition>基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器,但有以下几点区别:
默认情况下,它不会渲染一个容器元素。但你可以通过传入
tagprop 来指定一个元素作为容器元素来渲染。过渡模式在这里不可用,因为我们不再是在互斥的元素之间进行切换。
列表中的每个元素都必须有一个独一无二的
keyattribute。CSS 过渡 class 会被应用在列表内的元素上,而不是容器元素上。
TIP
当在 DOM 内模板中使用时,组件名需要写为
<transition-group>。
进入 / 离开动画
这里是
<TransitionGroup>对一个v-for列表添加进入 / 离开动画的示例:<TransitionGroup name="list" tag="ul"><li v-for="item in items" :key="item">{{ item }}</li> </TransitionGroup>.list-enter-active, .list-leave-active {transition: all 0.5s ease; } .list-enter-from, .list-leave-to {opacity: 0;transform: translateX(30px); }在任意位置添加一项移除任意位置上的一项
- 1
- 2
- 3
- 4
- 5
移动动画
上面的示例有一些明显的缺陷:当某一项被插入或移除时,它周围的元素会立即发生“跳跃”而不是平稳地移动。我们可以通过添加一些额外的 CSS 规则来解决这个问题:
.list-move, /* 对移动中的元素应用的过渡 */ .list-enter-active, .list-leave-active {transition: all 0.5s ease; }.list-enter-from, .list-leave-to {opacity: 0;transform: translateX(30px); }/* 确保将离开的元素从布局流中删除以便能够正确地计算移动的动画。 */ .list-leave-active {position: absolute; }现在它看起来好多了,甚至对整个列表执行洗牌的动画也都非常流畅:
添加删除重新排序
- 1
- 2
- 3
- 4
- 5
渐进延迟列表动画
通过在 JavaScript 钩子中读取元素的 data attribute,我们可以实现带渐进延迟的列表动画。首先,我们把每一个元素的索引渲染为该元素上的一个 data attribute:
<TransitionGrouptag="ul":css="false"@before-enter="onBeforeEnter"@enter="onEnter"@leave="onLeave" ><liv-for="(item, index) in computedList":key="item.msg":data-index="index">{{ item.msg }}</li> </TransitionGroup>接着,在 JavaScript 钩子中,我们基于当前元素的 data attribute 对该元素的进场动画添加一个延迟。
function onEnter(el, done) {gsap.to(el, {opacity: 1,height: '1.6em',delay: el.dataset.index * 0.15,onComplete: done}) }
相关文章:
Vue内置组件TransitionGroup详细介绍
<TransitionGroup> 是一个内置组件,用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。 和 <Transition> 的区别 <TransitionGroup> 支持和 <Transition> 基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器…...
【机器学习300问】71、神经网络中前向传播和反向传播是什么?
我之前写了一篇有关计算图如何帮助人们理解反向传播的文章,那为什么我还要写这篇文章呢?是因为我又学习了一个新的方法来可视化前向传播和反向传播,我想把两种方法总结在一起,方便我自己后续的复习。对了顺便附上往期文章的链接方…...
【ZZULIOJ】1067: 有问题的里程表(Java)
目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy 提示 code 题目描述 某辆汽车有一个里程表,该里程表可以显示一个整数,为该车走过的公里数。然而这个里程表有个毛病:它总是从3变到5,而跳过数字4,里程表…...
A21 STM32_HAL库函数 之 I2c通用驱动程序 -- B -- 所有函数的介绍及使用
A21 STM32_HAL库函数 之 I2c通用驱动程序 -- B -- 所有函数的介绍及使用 1 该驱动函数预览1.12 HAL_I2C_Master_Sequential_Receive_IT1.13 HAL_I2C_Slave_Transmit_IT1.14 HAL_I2C_Slave_Receive_IT1.15 HAL_I2C_Slave_Sequential_Transmit_IT1.16 HAL_I2C_Slave_Sequential_R…...
简介:Asp.Net Core进阶高级编程教程
课程简介目录 🚀前言一、课程背景二、课程目的三、课程特点四、课程适合人员六、最后 🚀前言 本文是《.Net Core进阶编程课程》教程专栏的导航站(点击链接,跳转到专栏主页,欢迎订阅,持续更新…)…...
Linux系统中LVM与磁盘配额
目录 一、LVM逻辑卷管理 二、LVM的管理命令 物理卷管理 卷组管理 逻辑卷管理 *创建并使用LVM步骤 三、磁盘配额概述 实现磁盘限额的条件 Linux 磁盘限额的特点 四、磁盘配额管理 磁盘限额 一、LVM逻辑卷管理 能够在保持现有数据不变的情况下动态调整磁盘容量&#…...
手机重启手app没了
发现公司有些Android球机设备,安装了一些app,重启后app没了,还有公司的一些Android手机,原来是没问题的,不知道哪天起,只要重启,新安装的软件就会没了,很神奇。后来发现,…...
github上传代码
偷一下懒,把链接贴一下,后续再补充。 1.下载Git 【学习笔记】上传代码到GitHub(保姆级教程) 2.如何创建GitHub仓库 手把手教你在github上传文件 3.如何删掉GitHub仓库 github如何删除仓库或项目? 4.遇到的错误 …...
Qt+vstudio2022的报错信息积累
从今天开始记录一下平常开发工作中的报错记录,后续有错误动态补充! 报错信息:【MSB8041】此项目需要 MFC 库。从 Visual Studio 安装程序(单个组件选项卡)为正在使用的任何工具集和体系结构安装它们。 解决: 背景:换…...
力扣练习题(2024/4/16)
1买卖股票的最佳时机 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔…...
c++中一些常用库函数
1.最大公约数 需要包括头文件#include<algorithm>,直接写__gcd(a,b),就是求a与b的最大公约数。 #include<iostream> #include<algorithm> #include<cstring> #include<cmath> #include<queue> #include<stack> #include<map>…...
竞赛 基于GRU的 电影评论情感分析 - python 深度学习 情感分类
文章目录 1 前言1.1 项目介绍 2 情感分类介绍3 数据集4 实现4.1 数据预处理4.2 构建网络4.3 训练模型4.4 模型评估4.5 模型预测 5 最后 1 前言 🔥 优质竞赛项目系列,今天要分享的是 基于GRU的 电影评论情感分析 该项目较为新颖,适合作为竞…...
软件杯 深度学习图像修复算法 - opencv python 机器视觉
文章目录 0 前言2 什么是图像内容填充修复3 原理分析3.1 第一步:将图像理解为一个概率分布的样本3.2 补全图像 3.3 快速生成假图像3.4 生成对抗网络(Generative Adversarial Net, GAN) 的架构3.5 使用G(z)生成伪图像 4 在Tensorflow上构建DCGANs最后 0 前言 &#…...
java日志log4j使用
1、导入jar包 log4j-1.2.17.jar log4j-api-2.0-rc1.jar log4j-core-2.0-rc1.jar https://download.csdn.net/download/weixin_44201223/89148839 所需jar包下载地址 2、创建 log4j.properties src 下创建 log4j.properties (路径和名称都不允许改变),放置 src 下…...
探索Python爬虫利器:Scrapy框架解析与实战
探索Python爬虫利器:Scrapy框架解析与实战 在当今信息时代,数据的价值不言而喻。而Python爬虫技术,作为获取网络数据的重要手段,已经成为了许多数据分析师、开发者和研究者必备的技能。本文将为您详细介绍Python爬虫技术中的利器—…...
Rust腐蚀服务器修改背景和logo图片操作方法
Rust腐蚀服务器修改背景和logo图片操作方法 大家好我是艾西一个做服务器租用的网络架构师。在我们自己搭建的rust服务器游戏设定以及玩法都是完全按照自己的想法设定的,如果你是一个社区服那么对于进游戏的主页以及Logo肯定会有自己的想法。这个东西可以理解为做一…...
【架构-15】NoSQL数据库
NoSQL(Not Only SQL)数据库是一类非关系型数据库,与传统的关系型数据库(如MySQL、Oracle)相对而言。NoSQL数据库的设计目标是针对大规模数据和高并发访问的需求,具有高可扩展性、高性能和灵活的数据模型。 …...
中国人工智能产业年会智能交通与自动驾驶专题全景扫描
中国人工智能产业年会(CAIIAC)是中国人工智能技术发展和应用的重要展示平台,不仅关注创新,还涵盖了市场和监管方面的内容,对于促进人工智能领域的发展起到了重要作用。年会汇集了来自学术界、工业界和政府的专家&#…...
SpringBoot相关知识点总结
1 SpringBoot的目的 简化开发,开箱即用。 2 Spring Boot Starter Spring Boot Starter 是 Spring Boot 中的一个重要概念,它是一种提供依赖项的方式,可以帮助开发人员快速集成各种第三方库和框架。Spring Boot Starter 的目的是简化 Sprin…...
【QT】关于qcheckbox常用的三个信号,{sstateChanged(int) clicked() clicked(bool)}达成巧用
在 Qt 中,QCheckBox 是一个提供复选框功能的小部件,允许用户选择和取消选择一个或多个选项。QCheckBox 提供了几种信号来响应用户的交互,其中 stateChanged(int), clicked(), 和 clicked(bool) 是常用的。下面解释这些信号的意义及其用法。 …...
【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程,并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令,把数据流转换成Message,状态转变流程是:State::Created 》 St…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...
Golang——7、包与接口详解
包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...
