快捷導航

React過渡動畫的具體使用

更新時間：2026年06月25日 10:57:17 作者：kyrie28

react-transition-group 是 React 官方維護的過渡動畫庫,專門用來給組件的掛載 / 卸載、顯示 / 隱藏添加過渡效果,本文就來詳細的介紹一下React過渡動畫的使用,感興趣的可以了解一下

一、核心組件說明

react-transition-group 提供了 4 個核心組件，最常用的是 CSSTransition 和 TransitionGroup：

安裝

npm install react-transition-group

組件	用途
Transition	基礎(chǔ)組件，用 JS 控制過渡狀態(tài)
CSSTransition	基于 CSS 類名的過渡（最常用）
TransitionGroup	管理一組元素的過渡，配合 CSSTransition 實現(xiàn)列表動畫
SwitchTransition	控制兩個組件切換時的過渡

最常用：CSSTransition 示例（單元素過渡）

實現(xiàn)一個簡單的淡入淡出效果：

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: 過渡持續(xù)時間（毫秒） classNames: 對應(yīng) 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;
} 
/* 離開前：保持當前狀態(tài) */
.fade-exit {
opacity: 1;
transform: scale(1);
} 
/* 離開中：過渡到隱藏狀態(tài) */ 
.fade-exit-active {
opacity: 0;
transform: scale(0.8); 
transition: all 300ms ease-in-out; }

進階：TransitionGroup 實現(xiàn)列表動畫

實現(xiàn)一個列表添加 / 刪除時的動畫效果：

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	過渡持續(xù)時間（毫秒），和 CSS 動畫時長保持一致
classNames	CSS 類名前綴，比如 classNames="fade" 會生成 fade-enter 等類名
unmountOnExit	動畫結(jié)束后卸載組件（隱藏時不占空間）
appear	組件首次掛載時也執(zhí)行進入動畫
onEnter / onEntered / onExit / onExited	過渡階段的鉤子函數(shù)