React过渡动画的具体使用
作者：kyrie28
react-transition-group 是 React 官方维护的过渡动画库,专门用来给组件的挂载 / 卸载、显示 / 隐藏添加过渡效果,本文就来详细的介绍一下React过渡动画的使用,感兴趣的可以了解一下
react-transition-group react-transition-group 是 React 官方维护的过渡动画库，专门用来给组件的挂载 / 卸载、显示 / 隐藏添加过渡效果。
一、核心组件说明
react-transition-group 提供了 4 个核心组件，最常用的是 CSSTransition 和 TransitionGroup：
安装
npm install react-transition-group
| 组件 | 用途 |
|---|---|
| Transition | 基础组件，用 JS 控制过渡状态 |
| CSSTransition | 基于 CSS 类名的过渡（最常用） |
| TransitionGroup | 管理一组元素的过渡，配合 CSSTransition 实现列表动画 |
| SwitchTransition | 控制两个组件切换时的过渡 |
最常用：CSSTransition 示例（单元素过渡）
实现一个简单的淡入淡出效果：
1. 组件代码
import { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './fade.css';
function FadeDemo() {
const [show, setShow] = useState(false);
return (
<div>
<button onClick={() => setShow(!show)}>
{show ? '隐藏' : '显示'}
</button>
{/* in: 控制是否显示 timeout: 过渡持续时间（毫秒） classNames: 对应 CSS 类名前缀 unmountOnExit: 隐藏时卸载组件 */}
<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit >
<div className="box">我是淡入淡出的盒子</div>
</CSSTransition>
</div>
); }
export default FadeDemo;
2. 配套 CSS（fade.css）
CSSTransition 会自动给元素添加这些类名：
fade-enter：进入前fade-enter-active：进入中fade-enter-done：进入完成fade-exit：离开前fade-exit-active：离开中fade-exit-done：离开完成
/* fade.css */
.box {
width: 200px;
height: 200px;
background: #409eff;
color: white;
display: flex;
align-items: center;
justify-content: center; margin-top: 20px;
}
/* 进入前：透明度0，缩小 */
.fade-enter {
opacity: 0;
transform: scale(0.8);
}
/* 进入中：过渡动画 */
.fade-enter-active{
opacity: 1;
transform: scale(1);
transition: all 300ms
ease-in-out;
}
/* 离开前：保持当前状态 */
.fade-exit {
opacity: 1;
transform: scale(1);
}
/* 离开中：过渡到隐藏状态 */
.fade-exit-active {
opacity: 0;
transform: scale(0.8);
transition: all 300ms ease-in-out; }进阶：TransitionGroup 实现列表动画
实现一个列表添加 / 删除时的动画效果：
1. 组件代码
import { useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './list.css';
function ListDemo() {
const [items, setItems] = useState([
{ id: 1, text: '列表项1' },
{ id: 2, text: '列表项2' },
{ id: 3, text: '列表项3' }
]);
const addItem = () => {
const newId = Math.max(...items.map(i => i.id)) + 1;
setItems([...items, { id: newId, text: `列表项${newId}` }]); };
const removeItem = (id) => {
setItems(items.filter(item => item.id !== id));
};
return (
<div>
<button onClick={addItem}>添加列表项</button>
{/* TransitionGroup 包裹整个列表，管理所有子项的过渡 */}
<TransitionGroup className="list">
{items.map(item => (
<CSSTransition key={item.id}
timeout={300}
classNames="list-item"
>
<div className="list-item">
{item.text}
<button onClick={() => removeItem(item.id)}>删除</button> </div> </CSSTransition> ))} </TransitionGroup>
</div> ); }
export default ListDemo;
- 配套 CSS（list.css）
/* list.css */
.list { margin-top: 20px; }
.list-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #f0f0f0; margin-bottom: 8px; border-radius: 4px; }
/* 进入动画：从下方滑入并淡入 */
.list-item-enter { opacity: 0; transform: translateY(20px); }
.list-item-enter-active { opacity: 1; transform: translateY(0); transition: all 300ms ease-out; }
/* 离开动画：向上滑出并淡出 */
.list-item-exit { opacity: 1; transform: translateY(0); }
.list-item-exit-active { opacity: 0; transform: translateY(-20px); transition: all 300ms ease-in;
}常用属性说明
CSSTransition 常用属性
| 属性 | 作用 |
|---|---|
| in | 控制组件是否显示（true/false） |
| timeout | 过渡持续时间（毫秒），和 CSS 动画时长保持一致 |
| classNames | CSS 类名前缀，比如 classNames="fade" 会生成 fade-enter 等类名 |
| unmountOnExit | 动画结束后卸载组件（隐藏时不占空间） |
| appear | 组件首次挂载时也执行进入动画 |
| onEnter / onEntered / onExit / onExited | 过渡阶段的钩子函数 |
TransitionGroup 注意事项
- 子项必须设置唯一的 key，否则动画会出错
- 每个子项都要包裹 CSSTransition 才能触发过渡
- 可以通过 component 属性指定包裹的标签（默认是 div）
到此这篇关于React过渡动画的具体使用的文章就介绍到这了,更多相关React过渡动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！