如何在React中使用CSSTransition实现内容变更时的过渡效果？

要给newName状态变化添加过渡效果，你可以通过react-transition-group库中的CSSTransition组件实现，具体步骤如下：

1. 安装依赖 #

首先需要安装react-transition-group包：

npm install react-transition-group
# 或者用yarn
yarn add react-transition-group

2. 导入CSSTransition #

在组件文件顶部导入CSSTransition：

import { CSSTransition } from 'react-transition-group';

3. 修改组件结构 #

用CSSTransition包裹显示newName的div，关键要设置key={newName}（确保每次newName变化时，组件识别为新元素触发过渡），同时配置过渡时长和类名前缀：

const Component = () => {
    const [newName, setNewName] = useState('');
    
    const updateName = (max: number) => {
        // 示例逻辑：替换成你的实际更新逻辑
        const sampleNames = ['Alice', 'Bob', 'Charlie', 'Diana'];
        setNewName(sampleNames[Math.floor(Math.random() * sampleNames.length)]);
    };

    return (
        <>
            <button onClick={() => updateName(4)}>更新名称</button>
            <CSSTransition
                key={newName}
                timeout={500}
                classNames="name-transition"
                unmountOnExit
            >
                <div className="name-display">{newName}</div>
            </CSSTransition>
        </>
    );
};
export default Component;

4. 添加CSS过渡样式 #

在全局CSS或组件专属样式中添加对应过渡类的样式，classNames设置的前缀会自动和过渡生命周期类名组合：

.name-display {
    padding: 8px 12px;
    font-size: 18px;
}

/* 进入过渡初始状态 */
.name-transition-enter {
    opacity: 0;
    transform: translateY(20px);
}

/* 进入过渡活跃状态 */
.name-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 500ms, transform 500ms;
}

/* 退出过渡初始状态 */
.name-transition-exit {
    opacity: 1;
    transform: translateY(0);
}

/* 退出过渡活跃状态 */
.name-transition-exit-active {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 500ms, transform 500ms;
}

关键说明 #

• key={newName}：每次newName更新时，CSSTransition会触发旧元素的退出过渡、新元素的进入过渡。
• timeout：必须设置，值要和CSS中过渡的时长保持一致，确保React正确管理过渡生命周期。
• unmountOnExit：可选配置，开启后退出过渡完成会自动移除旧元素，避免DOM中留存无用节点。

内容的提问来源于stack exchange，提问作者Devika Jayakumar