React 中直接用 useState 切换条件渲染的元素时，CSS transition 无法生效，因为元素被卸载/重新挂载，导致样式无中间状态可过渡；应改用 animation 或配合 useRef + CSSTransition 等方案实现平滑淡入淡出效果。
react 中直接用 `usestate` 切换条件渲染的元素时，css `transition` 无法生效，因为元素被卸载/重新挂载，导致样式无中间状态可过渡；应改用 `animation` 或配合 `useref` + `csstransition` 等方案实现平滑淡入淡出效果。
在 React 中，当使用 useState 配合条件渲染（如 {isTestWorking === 'test-1' && <Section />}）切换 DOM 元素时，CSS transition 往往失效——这不是代码写错了，而是由 React 的渲染机制决定的：旧元素被完全卸载（unmount），新元素被全新挂载（mount），CSS 过渡依赖的“同一元素状态变化”链被中断，浏览器根本没有机会触发 opacity 从 0 → 1 的渐变过程。
你最初尝试的 .test1 { opacity: 0; transition: ... } + .show { opacity: 1 } 方案逻辑正确，但前提是元素始终存在且仅 class 变化。而条件渲染会让元素“消失再出现”，opacity: 0 的初始状态在挂载瞬间即被跳过，动画自然不可见。
✅ 推荐解法一：使用 CSS @keyframes 动画（最轻量、无需额外依赖）
如 Copilot 所提示，改用 animation 是简洁有效的方案：
.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 保持精简（无需动态 class）：
{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(isTestWorking === "test-1" ? "test-2" : "test-1")}>
Transition
</button>⚠️ 注意：animation 默认每次挂载都触发，适合「进入」动效；若需「退出」动画（如淡出后卸载），则需进阶方案。
立即学习“前端免费学习笔记（深入）”；
✅ 推荐解法二：使用 react-transition-group（支持进入+退出全周期）
安装：npm install react-transition-group
改造示例：
import { CSSTransition, TransitionGroup } from 'react-transition-group';
// 替换原条件渲染为 TransitionGroup
<TransitionGroup component={null}>
{isTestWorking === "test-1" && (
<CSSTransition key="test-1" timeout={300} classNames="fade">
<section className="test1">
<h1>Testing 1</h1>
</section>
</CSSTransition>
)}
{isTestWorking === "test-2" && (
<CSSTransition key="test-2" timeout={300} classNames="fade">
<section className="test2">
<h1>Testing 2</h1>
</section>
</CSSTransition>
)}
</TransitionGroup>配套 CSS：
.fade-enter {
opacity: 0;
transform: translateX(-20px);
}
.fade-enter-active {
opacity: 1;
transform: translateX(0);
transition: all 300ms ease;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transform: translateX(20px);
transition: all 300ms ease;
}? 关键总结：
- transition 适用于同一 DOM 节点的属性渐变（如 hover、class 切换）；
- animation 适用于组件挂载时的单向入场效果；
- 复杂场景（需控制入场+退场、避免闪屏、精确同步）请选用 react-transition-group 或 framer-motion；
- 始终确保 key 属性唯一（尤其在 TransitionGroup 中），否则动画可能错乱。
选择哪种方案，取决于你的动效复杂度与项目依赖策略——简单淡入，CSS 动画足矣；追求专业交互动效，建议拥抱成熟的动画库。
