React@16.x(34)动画(中)

目录

  • 3,SwitchTransition
    • 3.1,原理
      • 3.1.2,key
      • 3.1.2,mode
    • 3.2,举例
    • 3.3,结合 animate.css
  • 4,TransitionGroup
    • 4.1,其他属性
      • 4.1.2,appear
      • 4.1.2,component
      • 4.1.3,classNames

接上面文章 React动画(上)

3,SwitchTransition

官方文档

在上篇文章中,用 CSSTransition 做了一个动画:

在这里插入图片描述

可以看到,这2个元素的动画是同时发生的,因为使用同一个状态变量控制的(代码参考上篇文章)

SwitchTransition 组件是专门用来做切换动画的,并且2个元素的动画是有先后顺序的。

元素1完成退出动画后,元素2再开始进入动画。

3.1,原理

默认情况下(mode="out-in"),通过改变状态变量来改变 key 值,才能开始切换动画,

key 属性替换了之前的 in 属性。

如果默认 state=true,渲染元素1,则切换状态时的动画过程:

  1. 先给元素1添加类名 exit exit-active,元素1执行退出动画。
  2. 等元素1的退出动画完成(过渡时间结束),再给元素2添加类名 enter enter-active 执行进入动画。
  3. 等元素2的进入动画完成,类名切换为 enter-done

所以,只需要设置这5个类名对应的样式即可。

如果进入动画结束后,用的默认样式(比如: opacity: 1)那类名 enter-done 也不用设置。

3.1.2,key

因为会将退出动画和进入动画对应的类名,设置到对应的元素上,来实现切换动画。

所以如果不设置,那所有的类名会加到同一个元素上,结果是该元素无限进入循环动画(退出-进入-退出…)

key 只要保证唯一,能区分为2个元素即可。

3.1.2,mode

默认 out-in,具体动画过程上面已经介绍了。

in-out,如果默认 state=true,渲染元素1,则切换状态时的动画过程:

  1. 保持元素1不变,为元素2添加enter enter-active 执行进入动画。
  2. 过渡时间结束,元素2的类名变为 enter-done,同时为元素1添加类名 exit exit-active,开始退出动画。
  3. 过渡时间结束,元素1被移除。

相当于先执行了一次元素2的进入动画,之后再开始执行元素1的退出动画。

3.2,举例

import { CSSTransition, SwitchTransition } from "react-transition-group";
import { useRef, useState } from "react";
import "./App.css";export default function App() {const [state, setState] = useState(true);return (<SwitchTransition><CSSTransition key={state} timeout={500}><button onClick={() => setState(!state)}>{state ? "状态1" : "状态2"}</button></CSSTransition></SwitchTransition>);
}
/* App.css */
.enter {opacity: 0;
}
.enter-active {opacity: 1;transition: opacity 1s;
}.exit {opacity: 1;
}
.exit-active {opacity: 0;transition: opacity 1s;
}

效果:

在这里插入图片描述

同样的,要在过渡完成后执行 transitionend 事件,可以:

export default function App() {const [state, setState] = useState(true);const refBtn1 = useRef(null);const refBtn2 = useRef(null);const nodeRef = state ? refBtn1 : refBtn2;return (<SwitchTransition><CSSTransitionkey={state}timeout={1000}nodeRef={nodeRef}addEndListener={() => {nodeRef.current.addEventListener("transitionend",() => {console.log("过渡结束");},{ once: true });}}><button ref={nodeRef} onClick={() => setState((state) => !state)}>{state ? "状态1" : "状态2"}</button></CSSTransition></SwitchTransition>);
}

3.3,结合 animate.css

animate 样式举例1,animate 样式举例2

安装:

npm install animate.css -S

样例完整代码:

import { CSSTransition, SwitchTransition } from "react-transition-group";
import { useState } from "react";
import "animate.css";export default function App() {const [state, setState] = useState(true);return (<SwitchTransition><CSSTransitionkey={state}timeout={1000}classNames={{appearActive: "animate__fadeInRight",enterActive: "animate__fadeInRight",exitActive: "animate__fadeOutLeft",}}><button className="animate__animated" onClick={() => setState(!state)}>{state ? "状态1" : "状态2"}</button></CSSTransition></SwitchTransition>);
}

效果:

在这里插入图片描述

4,TransitionGroup

官方文档

它接收一组 CSSTransitionTransition,统一控制它们的进入和退出动画。

SwitchTransition 一样,会添加对应的类名来实现动画。

经典例子:待办列表,可以动态新增或删除待办项,同时为每一项都应用动画。

import { TransitionGroup, CSSTransition } from "react-transition-group";
import { useState } from "react";
import { v4 as uuidv4 } from "uuid";
import "./App.css";export default function App() {const [todoList, setTodoList] = useState([{ id: uuidv4(), content: "学习" },{ id: uuidv4(), content: "吃饭" },{ id: uuidv4(), content: "睡觉" },]);return (<><TransitionGroup>{todoList.map((item) => (<CSSTransition key={item.id} timeout={500}><div><span>{item.content}</span><buttononClick={() => {const resultItem = todoList.filter((f) => f.id !== item.id);setTodoList(resultItem);}}>删除</button></div></CSSTransition>))}</TransitionGroup><buttononClick={() => {const answer = window.prompt();setTodoList([...todoList,{id: uuidv4(),content: answer,},]);}}>新增</button></>);
}

4.1,其他属性

4.1.2,appear

统一添加加载动画,同时会有 appearappear-activeappear-done 类名。

4.1.2,component

控制渲染的容器的节点类名,默认 divnull 表示不渲染节点。

<TransitionGroup appear component="ul">

4.1.3,classNames

component 对应节点的类名,不是动画类名前缀。

动画类名前缀,还是要添加到 CSSTransition 组件上。


以上。

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

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

相关文章

Qt Quick 教程(一)

文章目录 1.Qt Quick2.QML3.Day01 案例main.qml退出按钮&#xff0c;基于上面代码添加 4.使用Qt Design StudioQt Design Studio简介Qt Design Studio工具使用版本信息 1.Qt Quick Qt Quick 是一种现代的用户界面技术&#xff0c;将声明性用户界面设计和命令性编程逻辑分开。 …

mybatis中yml配置log-impl是什么?有什么用?

在 MyBatis 中&#xff0c;log-impl 配置用于定义 MyBatis 在执行 SQL 时使用的日志实现。配置 org.apache.ibatis.logging.stdout.StdOutImpl 表示 MyBatis 会将所有的 SQL 日志直接打印到标准输出&#xff08;即控制台&#xff09;。这在开发过程中非常有用&#xff0c;因为它…

前后端完整案例-简单模仿点点开黑抽奖

数据库 后台 源码&#xff1a;https://gitee.com/qfp17393120407/game 前台 源码&#xff1a; https://gitee.com/qfp17393120407/game-weeb vue项目打包 注意&#xff1a;打包时将IP改为自己公网IP npm run build公网页面 地址&#xff1a;点点模拟抽奖 进入页面抽奖…

K8S-使用SVC域名解决ip不固定导致consul服务注册脏数据异常问题

1 概述 各个模块注册nacos时&#xff0c;采用svc域名的方式&#xff0c;各模块间feign调用时使用的svc 域名来访问&#xff0c;这样就可以和ip解耦。 否则如果使用不固定IP&#xff0c;则可能在重启的时候&#xff0c;导致consul里面有一堆脏节点数据&#xff0c;影响服务调用…

不同表格式下的小文件治理方式(开源RC file/ORC/Text非事务表、事务表、Holodesk表格式..)

友情链接&#xff1a; 小文件治理系列之为什么会出现小文件问题&#xff0c;小文件过多问题的危害以及不同阶段下的小文件治理最佳解决手段 小文件过多的解决方法&#xff08;不同阶段下的治理手段&#xff0c;SQL端、存储端以及计算端&#xff09; 概览 在前两篇博文中&am…

自学鸿蒙HarmonyOS的ArkTS语言<一>基本语法

一、一个ArkTs的目录结构 二、一个页面的结构 A、装饰器 Entry 装饰器 : 标记组件为入口组件&#xff0c;一个页面由多个自定义组件组成&#xff0c;但是只能有一个组件被标记 Component : 自定义组件, 仅能装饰struct关键字声明的数据结构 State&#xff1a;组件中的状态变量…

【JVM】触发 Full GC 的条件

在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;垃圾收集&#xff08;Garbage Collection&#xff0c;简称GC&#xff09;是管理内存的关键机制。Full GC&#xff08;也称为Major GC或老年代GC&#xff09;是一种较为耗时的垃圾收集过程&#xff0c;会对整个堆&#xf…

SpirngMVC面试题

说一下 SpringMVC 支持的转发和重定向的写法(必会) 1&#xff09;转发&#xff1a; forward 方式:在返回值前面加"forward:",比如"”"forward:user.do?namemethod4" 2) 重定向: redirect 方式&#xff1a;在返回值前面加 redirect:, 比如"redi…

服务器雪崩的应对策略之----熔断机制

熔断机制&#xff08;Circuit Breaker&#xff09;是一种保护系统稳定性的重要手段。它的主要目的是防止系统在依赖的服务出现问题时&#xff0c;继续发送请求&#xff0c;从而保护系统免受进一步的影响。熔断机制通过监控请求的成功和失败率&#xff0c;在检测到故障率超过预设…

python全栈开发《10.数据类型之初识列表类型》

1.什么是列表 其实在生活中&#xff0c;有很多种排队的现象。比如看电影要排队买票&#xff0c;上地铁的时候要排队安检。在生活中&#xff0c;排队的是人&#xff0c;为了统一做一件事&#xff0c;而排成队伍&#xff0c;逐个的去等待执行这个任务&#xff0c;每个人都是执行这…

平衡查找树(数据结构篇)

数据结构之平衡查找树 平衡查找树(AVL树) 概念&#xff1a; 为了防止因为插入删除而导致的树结构不平衡(通常我们删除节点总是对右子树的最小值节点替代操作&#xff0c;而不是交替的利用左子树的最大值节点替代&#xff0c;这就将导致左子树的平均深度大于右子树平均深度&a…

基于Java的高校校园点餐系统

开头语&#xff1a; 你好&#xff0c;我是计算机专业的学长&#xff0c;如果你对高校校园点餐系统感兴趣或有相关开发需求&#xff0c;欢迎联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP技术 工具&#xff1a;Eclipse、Tomcat 系统展示…

分布式用例执行

前言 这两天趁着有时间&#xff0c;我疯狂的码字了~~ 背景 我们公司是做人工智能平台的&#xff0c;什么是人工智能呢&#xff1f; 大数据 机器学习。大数据运行的基本就不快。机器学习算法运行起来也是慢的让人泪流满面。在我们的集群配置下&#xff0c;我使用一个 5M 的数…

基于IDEA的Maven(properties属性配置)

&#xff08;property &#xff1a;财产&#xff09;properties&#xff1a;它的复数。 同样也是基于上篇博客进行学习。&#xff08;具体的全部项目代码和结构可以去查看上篇...&#xff09; <properties><!--当前jdk版本 , 这一步可以完全省略--><maven.com…

【技巧】Leetcode 137. 只出现一次的数字 II【中等】

只出现一次的数字 II 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每个元素都恰出现 三次 。请你找出并返回那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法且使用常数级空间来解决此问题。 示例 1&#xff1a; 输入&…

2024青海三支一扶招1910人7月6日笔试

&#x1f4e2;2024年青海省三支一扶计划招募1910人公告已发布&#xff01; 小&#x1f004;️帮大家整理好了考试关键时间点&#xff1a; ★ 报名时间&#xff1a;6月20日至6月25日 ★ 报名网站&#xff1a;青海省人事考试信息网&#xff08;www.qhpta.com&#xff09; ★ 网上…

android studio构建项目报错Could not create an instance of type com.android.build.api.variant.impl.Applicat

Could not create an instance of type com.android.build.api.variant.impl.ApplicationVariantImpl 这个错误通常是由于Gradle插件版本不兼容导致的。你可能正在使用的Gradle插件版本与你的Android Studio版本不兼容。 要解决这个问题&#xff0c;你可以尝试以下解决方法&a…

音视频入门基础:H.264专题(3)——EBSP, RBSP和SODB

音视频入门基础&#xff1a;H.264专题系列文章&#xff1a; 音视频入门基础&#xff1a;H.264专题&#xff08;1&#xff09;——H.264官方文档下载 音视频入门基础&#xff1a;H.264专题&#xff08;2&#xff09;——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…

行为树行为树行为树

行为树由一个个节点组成 结构&#xff1a;树状结构运行流程&#xff1a;从根节点开始自顶向下往下遍历&#xff0c;每经过一个节点就执行节点对应的功能。 我们规定&#xff0c;每个节点都提供自己的excute函数&#xff0c;返还执行失败/成功结果。 然后根据不同节点的执行结…

C++ Primer 学习 -- Day 2

第 3 章知识点总结 3.1 .1 命名空间的using 声明提醒 3.2.1 定义和初始化 string 对象直接初始化和拷贝初始化 3.2.2 string 对象上的操作提醒比较 string 对象( vector 也一样 )字面值和 string 对象相加提醒 3.2.3处理 string 对象中的字符建议处理每个字符&#xff1f;使用基…