React过渡动画

1.react-transition-group介绍

对于实现一个组件的显示与消失的过渡动画,可以通过原生的CSS来实现这些过渡动画,但是React社区为我们提供了react-transition-group库用来完成过渡动画。

# npm
npm install react-transition-group --save
# yarn
yarn add react-transition-group

 2.react-transition-group主要组件

  • Transition
  • CSSTransition
  • SwitchTransition
  • TransitionGroup
2.1 CSSTransition

CSSTransition是基于Transition组件构建的;

CSSTransition执行过程中,有三个状态:appear、enter、exit;

对应三种状态:

  • 第一类, 开始状态 :对于的类是-appear、-enter、exit;
  • 第二类: 执行动画 :对应的类是-appear-active、-enter-active、-exit-active;
  • 第三类:执行结束:对应的类是-appear-done、-enter-done、-exit-done;
2.2 CSSTransition常见对应的属性
in:触发进入或者退出状态
  • 如果添加了unmountOnExit={true},那么该组件会在执行退出动画结束后被移除掉
  • 当in为true时,触发进入状态,会添加-enter、-enter-acitve的class开始执行动画,当动画执行结束后,会移除两个class,并且添加-enter-done的class;
  • 当in为false时,触发退出状态,会添加-exit、-exit-active的class开始执行动画,当动画执行结束后,会移除两个class,并且添加-enter-done的class;
classNames:动画class的名称
  • 决定了在编写css时,对应的class名称:比如card-enter、card-enter-active、card-enter-done;
timeout:过渡动画的时间
appear: 是否在初次进入添加动画(需要和in同时为true)
unmountOnExit:退出后卸载组件
import React, { createRef, PureComponent } from 'react'
import { CSSTransition } from "react-transition-group"
import "./style.css"export class App extends PureComponent {constructor(props) {super(props)this.state = {isShow: true}this.sectionRef = createRef()}render() {const { isShow } = this.statereturn (<div><button onClick={e => this.setState({isShow: !isShow})}>切换</button>{/* { isShow && <h2>哈哈哈</h2> } */}<CSSTransition nodeRef={this.sectionRef}in={isShow} unmountOnExit={true} classNames="why" timeout={2000}appearonEnter={e => console.log("开始进入动画")}onEntering={e => console.log("执行进入动画")}onEntered={e => console.log("执行进入结束")}onExit={e => console.log("开始离开动画")}onExiting={e => console.log("执行离开动画")}onExited={e => console.log("执行离开结束")}><div className='section' ref={this.sectionRef}><h2>哈哈哈</h2><p>我是内容, 哈哈哈</p></div></CSSTransition></div>)}
}export default App
.why-appear, .why-enter {opacity: 0;
}.why-appear-active, .why-enter-active {opacity: 1;transition: opacity 2s ease;
}/* 离开动画 */
.why-exit {opacity: 1;
}.why-exit-active {opacity: 0;transition: opacity 2s ease;
}
2.3 SwitchTransition

SwitchTransition可以完成两个组件之间切换的炫酷动画:

比如我们有一个按钮需要在on和off之间切换,我们希望看到on先从左侧退出,off再从右侧进入;
SwitchTransition中主要有一个属性:mode,有两个值
  • in-out:表示新组件先进入,旧组件再移除;
  • out-in:表示就组件先移除,新组建再进入;
import React, { PureComponent } from 'react'
import { SwitchTransition, CSSTransition } from 'react-transition-group'
import "./style.css"export class App extends PureComponent {constructor() {super() this.state = {isLogin: true}}render() {const { isLogin } = this.statereturn (<div><SwitchTransition mode='out-in'><CSSTransitionkey={isLogin ? "exit": "login"}classNames="login"timeout={1000}><button onClick={e => this.setState({ isLogin: !isLogin })}>{ isLogin ? "退出": "登录" }</button></CSSTransition></SwitchTransition></div>)}
}export default App
.login-enter {transform: translateX(100px);opacity: 0;
}.login-enter-active {transform: translateX(0);opacity: 1;transition: all 1s ease;
}.login-exit {transform: translateX(0);opacity: 1;
}.login-exit-active {transform: translateX(-100px);opacity: 0;transition: all 1s ease;
}
2.4 TransitionGroup

将多个动画放到一组动画里执行,通过TransitionGroup组件实现;

例如书籍列表的添加与删除动画,为每个书籍项添加新增与删除动画;

import React, { PureComponent } from 'react'
import { TransitionGroup, CSSTransition } from "react-transition-group"
import "./style.css"export class App extends PureComponent {constructor() {super()this.state = {books: [{ id: 111, name: "你不知道JS", price: 99 },{ id: 222, name: "JS高级程序设计", price: 88 },{ id: 333, name: "Vuejs高级设计", price: 77 },]}}addNewBook() {const books = [...this.state.books]books.push({ id: new Date().getTime(), name: "React高级程序设计", price: 99 })this.setState({ books })}removeBook(index) {const books = [...this.state.books]books.splice(index, 1)this.setState({ books })}render() {const { books } = this.statereturn (<div><h2>书籍列表:</h2><TransitionGroup component="ul">{books.map((item, index) => {return (<CSSTransition key={item.id} classNames="book" timeout={1000}><li><span>{item.name}-{item.price}</span><button onClick={e => this.removeBook(index)}>删除</button></li></CSSTransition>)})}</TransitionGroup><button onClick={e => this.addNewBook()}>添加新书籍</button></div>)}
}export default App
.book-enter {transform: translateX(150px);opacity: 0;
}.book-enter-active {transform: translateX(0);opacity: 1;transition: all 1s ease;
}.book-exit {transform: translateX(0);opacity: 1;
}.book-exit-active {transform: translateX(150px);opacity: 0;transition: all 1s ease;
}

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

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

相关文章

【数据结构】归并排序和计数排序(排序的总结)

目录 一&#xff0c;归并排序的递归 二&#xff0c;归并排序的非递归 三&#xff0c;计数排序 四&#xff0c;排序算法的综合分析 一&#xff0c;归并排序的递归 基本思想&#xff1a; 归并采用的是分治思想&#xff0c;是分治法的一个经典的运用。该算法先将原数据进行拆…

回溯之 组合类问题

1、什么时候用startindex&#xff0c;什么时候不用&#xff1f; ans&#xff1a;一般在一个集合里反复操作&#xff0c;用。在多个集合里&#xff0c;不能用

BUUCTF SimpleRev

分析 该文件为64位的ELF文件&#xff0c;运行在linux平台 使用IDA64打开 进入Decry函数 输入flag和成功的提示 看看如何才能成功拿到flag 这里比较text和str2&#xff0c;text是源代码就有的 那么str2应该就是我们输入的内容 先分析text的内容是什么 进入join函数 该函数…

【算法与数据结构】--算法基础--算法设计与分析

一、贪心算法 贪心算法是一种解决优化问题的算法设计方法&#xff0c;其核心思想是在每一步选择当前状态下的最优解&#xff0c;从而希望最终达到全局最优解。下面将介绍贪心算法的原理、实现步骤&#xff0c;并提供C#和Java的实现示例。 1.1 原理&#xff1a; 贪心算法的原…

SpringBoot项目整合MybatisPlus持久层框架+Druid数据库连接池

前言 之前搭建SpringBoot项目工程&#xff0c;所使用的持久层框架不是Mybatis就是JPA&#xff0c;还没试过整合MybatisPlus框架并使用&#xff0c;原来也如此简单。在此简单记录一下在SpringBoot项目中&#xff0c;整合MybatisPlus持久层框架、Druid数据库连接池的过程。 一、…

Eclipse iceoryx(千字自传)

1 在固定时间内实现无任何限制的数据传输 在汽车automotive、机器人robotics和游戏gaming等领域,必须在系统的不同部分之间传输大量数据。使用Linux等操作系统时,必须使用进程间通信(IPC)机制传输数据。Eclipse iceoryx是一种中间件,它使用零拷贝Zero-Copy、共享内存Share…

RPA机器人的使用条件是什么,可以使用在私域运营中吗?

随着科技的发展&#xff0c;许多新型技术为我们的生活和工作带来了极大的便利。其中&#xff0c;RPA机器人作为一种自动化工具&#xff0c;正逐渐被广泛应用于各个领域。本文将探讨RPA机器人的使用条件&#xff0c;并分析是否可以在私域运营中使用。 首先&#xff0c;了解RPA机…

JAVA--一次性输入一行数

1 使用循环逐个输入&#xff08;类C&#xff09; 首先需要创建一个用于输入的Scanner对象&#xff0c;然后使用循环来连续读取输入。当需要输入的数目未知或数目不确定时&#xff0c;这是一个常见的做法。 import java.util.Scanner;public class Main {public static void m…

【OSPF宣告——network命令与多区域配置实验案例】

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大二在校生&#xff0c;喜欢编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;小新爱学习. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc…

NanoPC-T4 RK3399:移植Kernel和rootfs

一:获取源码 Rockchip SDK: git clone https://github.com/rockchip-linux/kernel.git 主线源码: GitHub - torvalds/linux: Linux kernel source tree The Linux Kernel Archives 二:编译 1、修改Makefile ARCH := arm64 CROSS_COMPILE := /home/zhaotj/tools…

win10电脑插入耳机,右边耳机声音比左边小很多

最近使用笔记本看视频&#xff0c;发现插入耳机&#xff08;插入式和头戴式&#xff09;后&#xff0c;右边耳机声音比左边耳机声音小很多很多&#xff0c;几乎是一边很清晰&#xff0c;另一边什么都听不到。 将耳机插到别人电脑上测试耳机正常&#xff0c;那就是电脑的问题。试…

自然语言处理(NLP)的开发框架

自然语言处理&#xff08;NLP&#xff09;领域有许多开源的框架和库&#xff0c;用于处理文本数据和构建NLP应用程序。以下是一些常见的NLP开源框架及其特点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合…

Outlook屏蔽Jira AI提醒

前言&#xff1a;最近不知道为什么jira上的ai小助手抽风&#xff0c;一周发个几千封邮件…导致我现在都不想在邮箱里面跟找垃圾一样找消息了。实在忍无可忍&#xff0c;决定屏蔽AI小助手&#xff0c;方法很简单&#xff0c;follow me~~ 第一步&#xff1a;双击打开电脑版Outloo…

springboot家乡特色推荐系统springboot28

大家好✌&#xff01;我是CZ淡陌。一名专注以理论为基础实战为主的技术博主&#xff0c;将再这里为大家分享优质的实战项目&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路…

leetCode 1143.最长公共子序列 动态规划 + 滚动数组

1143. 最长公共子序列 - 力扣&#xff08;LeetCode&#xff09; 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串…

接口(interface)

接口&#xff08;interface&#xff09; 概述 接口就是规范&#xff0c;定义一组规则&#xff0c;体现了现实世界中“如果你是/要…则必须能…”的思想。继承是一个“是不是”的is-a关系&#xff0c;而接口实现则是“能不能”的has-a关系 1.接口的理解&#xff1a;接口的本质…

Oracle Database Express Edition (XE)配置与部署

获取下载安装包 https://www.oracle.com/cn/database/technologies/xe-downloads.htmlhttps://yum.oracle.com/repo/OracleLinux/OL7/latest/x86_64/index.html安装.rpm安装包 cd /usr/local/src wget https://download.oracle.com/otn-pub/otn_software/db-express/oracle-d…

Linux下kibana的安装与配置

1. 环境配置 确保Linux服务器上已安装Java 8或更高版本。可以通过运行 java -version 来验证Java的版本。 下载Kibana 7.17.11的压缩文件&#xff0c;可以从Kibana 7.17.11下载 上传服务器&#xff0c;并解压Kibana压缩文件。 2. Kibana配置 编辑Kibana的配置文件 config/k…

Golang Gocron开源定时框架

GoCron 是一个开源的 Go 语言定时任务框架&#xff0c;它允许你在 Go 代码中轻松地创建和管理定时任务。你可以使用 GoCron 来执行周期性任务、定时任务等&#xff0c;它提供了简单的 API 和丰富的功能&#xff0c;以帮助你管理定时任务。 要开始使用 GoCron&#xff0c;你需要…

Idea下面git的使用:变基、合并、优选、还原提交、重置、回滚、补丁

多分支和分支切换 变基和合并 变基是把本项目的所有提交都列出来按顺序一个个提交到目标分支上去 而合并是把两个分支合并起来&#xff0c;但是旧的分支还是可以启动其他分支&#xff0c;在旧的分支上继续开发 master: A -- B -- C -- M/ feature: D -- Emaster: A -…