本文详解 react 中使用 usestate 切换组件时，如何通过 css transitions 或 animations 实现平滑淡入淡出效果，并指出直接使用 transition 的常见陷阱及可靠替代方案。
本文详解 react 中使用 usestate 切换组件时，如何通过 css transitions 或 animations 实现平滑淡入淡出效果，并指出直接使用 transition 的常见陷阱及可靠替代方案。
在 React 中，当使用 useState 动态控制 DOM 元素的显示与隐藏（如通过条件渲染 &&）时，直接依赖 CSS transition 实现入场动画往往失效——原因在于：被切换的
✅ 正确解法分两类，推荐按场景选择：
✅ 方案一：使用 CSS @keyframes 动画（推荐用于单次入场）
适用于“新元素首次出现时淡入”，无需监听状态变化时机，代码简洁可靠：
.test1, .test2 {
animation: fade-in 0.8s ease-in-out forwards;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
对应 JSX（移除冗余 show 类，简化逻辑）：
{isTestWorking === "test-1" && (
<section classname="test1"><h1>Testing 1</h1>
</section>
)}
{isTestWorking === "test-2" && (
<section classname="test2"><h1>Testing 2</h1>
</section>
)}
<button onclick="{()"> setIsTestWorking("test-2")}>切换到测试2</button>
<button onclick="{()"> setIsTestWorking("test-1")}>切换到测试1</button>
? 提示：forwards 确保动画结束后保持 opacity: 1；添加 transform 可增强动效层次感。
⚠️ 方案二：使用 transition + useRef + useEffect（适用于双向过渡）
若需支持「淡入 + 淡出」完整过渡（如旧元素淡出、新元素淡入），需借助 ref 监听挂载/卸载，并手动管理类名生命周期：
import { useRef, useEffect } from 'react';
function FadeSection({ show, children, className }) {
const ref = useRef(null);
useEffect(() => {
if (show && ref.current) {
ref.current.classList.add('show');
}
}, [show]);
return (
<section ref="{ref}" classname="{`${className}" : style="{{" opacity: show>
{children}
</section>
);
}
// 使用方式
<fadesection show="{isTestWorking" classname="test1"><h1>Testing 1</h1>
</fadesection>
配套 CSS：
.test1, .test2 {
transition: opacity 0.5s ease, transform 0.5s ease;
}
.test1.hidden, .test2.hidden {
opacity: 0;
transform: translateY(10px);
}
? 关键注意事项
- ❌ 避免在条件渲染中直接用 className={... ? "show" : ""} 配合 transition —— 元素未挂载，transition 不触发；
- ✅ @keyframes 动画天然适配挂载瞬间，是快速实现入场效果的首选；
- ? 如需精确控制进出动画时序（如旧组件先淡出再新组件淡入），建议结合 react-transition-group 库；
- ? 测试时可临时添加 border: 1px solid red 查看元素是否真实挂载，排除渲染逻辑问题。
掌握这一模式，即可在 React 函数组件中稳定实现优雅的视觉过渡，让状态切换不再生硬。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
