React过渡动画的具体使用

npm install react-transition-group

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;

/* 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; }

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;

/* 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; 
}