React@16.x(35)动画(下)封装动画组件需要注意的问题

目录

  • 1,封装举例
  • 2,问题
    • 2.1,timeout
    • 2.2,配合 SwitchTransition / TransitionGroup

接上篇文章 React动画(中)

1,封装举例

封装一个渐入渐出效果的动画组件

import { CSSTransition } from "react-transition-group";
import "./FadeTransition.css";export default function FadeTransition(props) {return <CSSTransition {...props}>{props.children}</CSSTransition>;
}
/* FadeTransition.css */
.appear {opacity: 0;
}.appear-active {opacity: 1;transition: opacity 1s;
}.enter {opacity: 0;
}
.enter-active {opacity: 1;transition: opacity 1s;
}.exit-active {opacity: 0;transition: opacity 1s;
}.exit-done {opacity: 0;
}

使用

import { useState } from "react";
import FadeTransition from "./FadeTransition";export default function App() {const [state, setState] = useState(true);return (<><button onClick={() => setState(!state)}>{state ? "隐藏" : "显示"}</button><FadeTransition in={state} appear timeout={1000}><h1>标题1</h1></FadeTransition></>);
}

2,问题

2.1,timeout

可以看到,传递的 timeout 需要和 css 中的过渡时间保持一致。

解决:将 css 文件中设置的 transition 属性都移除掉,通过内联样式设置。

内联样式通过钩子函数来设置:

import { CSSTransition } from "react-transition-group";
import "./FadeTransition.css";FadeTransition.defaultProps = {timeout: 500,
};const addTransition = (node, timeout) => {node.style.transition = `opacity ${timeout}ms`;
};const removeTransition = (node) => {node.style.transition = "";
};export default function FadeTransition(props) {return (<CSSTransition{...props}onEnter={(node) => addTransition(node, props.timeout)}onEntered={(node) => removeTransition(node)}onExit={(node) => addTransition(node, props.timeout)}onExited={(node) => removeTransition(node)}>{props.children}</CSSTransition>);
}

2.2,配合 SwitchTransition / TransitionGroup

SwitchTransition 组件会调用 CSSTransition 组件的 onExited 方法,让下个元素执行进入动画,所以需要执行传入的 props.onExited(node)

其实,这几个动画组件在不同的动画状态,添加对应的类名,都是在这些钩子函数中实现的。

export default function FadeTransition(props) {return (<CSSTransition{...props}onEnter={(node) => addTransition(node, props.timeout)}onEntered={(node) => removeTransition(node)}onExit={(node) => addTransition(node, props.timeout)}onExited={(node) => {removeTransition(node);props.onExited && props.onExited(node);}}>{props.children}</CSSTransition>);
}

使用:

export default function App() {const [state, setState] = useState(true);return (<><button onClick={() => setState(!state)}>切换</button><SwitchTransition><FadeTransition key={state} appear timeout={1000}><h1>{state ? "标题1" : "标题2"}</h1></FadeTransition></SwitchTransition></>);
}

TransitionGroup 同理,不再赘述。


以上。

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

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

相关文章

Maven笔记(更新中)

一、Maven简介 Maven是一款为Java项目构建,依赖管理的工具(软件),使用Maven可以自动化构建,测试,打包和发布项目,大大提高了开发效率和质量 Maven主要作用理解 依赖管理 Maven可以管理项目的依赖,包括自动下载所需依赖库,自动下载依赖所需的依赖并且保证版本没有冲突,依赖版…

(五)数据采集与处理基础练习题(17道选择题)

本文整理了数据采集与处理基础相关的练习题&#xff0c;共17道&#xff0c;适用于想巩固理论基础的同学。来源&#xff1a;如荷学数据科学题库&#xff08;CDA二级-第二三四章&#xff09;。 1&#xff09; 2&#xff09; 3&#xff09; 4&#xff09; 5&#xff09; 6&#x…

电脑系统重装怎么操作?分享四个win10重装系统方法

“我遇到了一些笔记本电脑的问题&#xff0c;别人告诉我解决这个问题需要重新安装Win10电脑系统。但我不记得我把光盘放在哪里了&#xff0c;我能否在不丢失文件的情况下重新安装操作系统&#xff1f;电脑系统重装怎么操作&#xff1f;”虽然电脑自带系统中有多种方法可供选择&…

工业边缘计算网关

1 介绍 HINETG系列边缘计算网关&#xff08;Linux操作系统&#xff09;&#xff0c;是华辰智通的—款面向工业现场设备接入、数据采集、设备监控的工业级边缘计算网关。采用ARM Cortex-A7 800MHz高性能CPU,拥有以太网、串口、CAN口、IO口等丰富的接口&#xff0c;支持以太网、…

项目实践---Windows11中安装Zookeeper/Hadoop/Hive的部分问题解决

一.Hadoop与Hive兼容版本选择 正常来说&#xff0c;Hadoop与Hive版本不兼容会出现很多问题导致hive安装失败&#xff0c;可以先确定HIve的版本&#xff0c;比如&#xff1a;要用Hive3.1.2版本&#xff0c;该如何确定使用Hadoop的版本呢&#xff0c;需要我们在hive源码中找到对…

开发 Golang 项目的 Docker 化案例

开发 Golang 项目的 Docker 化案例 在这个案例中&#xff0c;我们将展示如何使用 Docker 容器化一个简单的 Golang Web 应用。我们将创建一个基于 Go 的 Hello World 应用&#xff0c;并使用 Docker 和 Docker Compose 管理容器化环境。 1. 创建 Golang Web 应用 首先&#…

C++ 最小生成树

描述 一个有 n 户人家的村庄&#xff0c;有 m 条路相互连接着。村里现在要修路&#xff0c;每条路都有一个成本价格&#xff0c;现在请你帮忙计算下&#xff0c;最少需要花费多少钱&#xff0c;就能让这 n 户人家连接起来。cost 为一个二维数组&#xff0c;每个元素是一个长度…

数据挖掘的基本介绍以及Python、pandas的基本应用

1. 介绍与准备 1.1 数据挖掘是什么&#xff1f; 1.1.1 什么是数据挖掘 数据挖掘是寻找数据中隐含的知识并用于产生商业价值的过程。它通过分析大量数据&#xff0c;揭示其中的模式和关系&#xff0c;帮助企业做出更明智的决策。 1.1.2 为什么要做数据挖掘&#xff1f; 数据挖…

【性能优化】表分桶实践最佳案例

分桶背景 随着企业的数据不断增长&#xff0c;数据的分布和访问模式变得越来越复杂。我们前面介绍了如何通过对表进行分区来提高查询效率&#xff0c;但对于某些特定的查询模式&#xff0c;特别是需要频繁地进行数据联接查或取样的场景&#xff0c;仍然可能面临性能瓶颈。此外…

sql语句中常用的函数有那些

1、字符串函数 CONCAT(string1, string2, ...): 连接两个或多个字符串。 UPPER(string): 将字符串转换为大写。 LOWER(string): 将字符串转换为小写。 TRIM(string): 去除字符串两端的空格。 LENGTH(string): 返回字符串的长度。 SUBSTRING(string, start, length): 从字符串中…

借助AI营销类API,实现自动化的营销流程

借助AI营销类API&#xff0c;企业可以实现自动化的营销流程&#xff0c;提高效率和效果&#xff0c;并节省大量的时间和资源。这些API利用人工智能和机器学习的技术&#xff0c;能够自动化地执行各种营销任务和流程。首先&#xff0c;AI营销类API可以帮助企业实现自动化的市场调…

c++ 多重包含/定义 || 链接性 || 生命周期

作用域&&生命周期 C 中的作用域&#xff08;scope&#xff09;指的是变量、函数或其他标识符的可见和可访问的范围。 生命周期&#xff08;Lifetime&#xff09;指的是变量或对象存在的时间段。它开始于变量或对象的创建&#xff08;定义&#xff09;时刻&#xff0c;…

2025届阳光保险集团应届生校招社招入职测评真题题库北森自适应测评题库

第1题 人类使用塑料袋的历史很短&#xff0c;但对塑料袋的指责却不绝于耳。全世界每年要消耗5000亿到1万亿个塑料袋。废弃的塑料袋被掩埋会影响农作物吸收营养和水分&#xff0c;污染地下水;焚烧塑料袋则会产生有毒气体&#xff0c;影响人体健康。因此如何处理塑料袋十分重要。…

大数据学习-Hive 函数

目录 Hive函数 Hive的内置函数 数学函数 取整函数: round 指定精度取整函数: round 向下取整函数: floor 向上取整函数: ceil 取随机数函数: rand 幂运算函数: pow 绝对值函数: abs 字符串函数 字符串长度函数&#xff1a;length 字符串反转函数&#xff1a;reverse 字…

微信小程序常用标签及其用法

大家好&#xff0c;我是linzi&#xff0c;今天我来给大家分享一下微信小程序一些个常用的标签及其用法 1. <view> 标签 <view> 标签是小程序中最常用的标签之一&#xff0c;用于组织和布局页面上的内容&#xff0c;类似于HTML中的 <div> 标签。 <view …

STM32——温湿度采集与显示

一、I2C协议 关于I2C协议的基本原理和时序协议 12C协议使用两条线&#xff1a;SDA&#xff08;Serial Data Line&#xff0c;串行数据线&#xff09;和SCL&#xff08;Serial Clock Line&#xff0c;串行时钟线&#xff09;。这两条线都是开漏输出&#xff0c;意味着它们需要上…

NTP对时-客户端程序

#include <QObject> class QUdpSocket;#if 0 // NTP协议帧&#xff08;未使用&#xff09; typedef struct {char LI_VN_Mode;char Stratum;char Poll;char Precision;int RootDelay;int RootDispersion;int ReferenceIdentifier;quint64 ReferenceTimeStamp; …

【AI作曲】毁掉音乐?早该来了!一个网易音乐人对于 AI 大模型音乐创作的思辨

引言&#xff1a;AI在创造还是毁掉音乐&#xff1f; 正如当初 midjourney 和 StableDiffusion 在绘画圈掀起的风波一样&#xff0c;suno 和 各大音乐大模型的来临&#xff0c;其实早该来了。 AI 在毁掉绘画&#xff1f;或者毁掉音乐&#xff1f; 没错&#xff0c;但也错了。…

MGV电源维修KUKA机器人电源模块PH2003-4840

MGV电源维修 库卡电源模块维修 机器人电源模块维修 库卡控制器维修 KUKA电源维修 库卡机器人KUKA主机维修 KUKA驱动器模块维修 机械行业维修&#xff1a;西门子系统、法那克系统、沙迪克、FIDIA、天田、阿玛达、友嘉、大宇系统&#xff1b;数控冲床、剪板机、折弯机等品牌数控…

语音相关算法学习整理

最近看了一下百度paddlespeech的一些公开课&#xff0c;把课程里的视频内容大体听了一下&#xff0c;现在整理一下笔记。教程链接见&#xff1a;飞桨AI Studio星河社区-人工智能学习与实训社区 语音识别的过程可以这样简单概括&#xff1a; 将声音信号经过预加重、加窗、fft等…