如何在 React useState 控制的元素上正确实现 CSS 过渡动画-html教程-PHP中文网

React 中直接用 useState 切换条件渲染的元素时，CSS transition 无法生效，因为元素被卸载/重新挂载，导致样式无中间状态可过渡；应改用 animation 或配合 useRef + CSSTransition 等方案实现平滑淡入淡出效果。

react 中直接用 `usestate` 切换条件渲染的元素时，css `transition` 无法生效，因为元素被卸载/重新挂载，导致样式无中间状态可过渡；应改用 `animation` 或配合 `useref` + `csstransition` 等方案实现平滑淡入淡出效果。

在 React 中，当使用 useState 配合条件渲染（如 {isTestWorking === 'test-1' &&

}）切换 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 默认每次挂载都触发，适合「进入」动效；若需「退出」动画（如淡出后卸载），则需进阶方案。

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

✅ 推荐解法二：使用 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;
}

? 关键总结：