本文介绍如何在 React 中为卡片选择状态切换（全量展示 ↔ 单张高亮）添加流畅的 CSS 过渡动画，避免 DOM 完全卸载导致的闪烁问题，并提供可复用、可取消的 setTimeout 动画控制方案。
本文介绍如何在 react 中为卡片选择状态切换（全量展示 ↔ 单张高亮）添加流畅的 css 过渡动画，避免 dom 完全卸载导致的闪烁问题，并提供可复用、可取消的 `settimeout` 动画控制方案。
在 React 中实现卡片选择状态的视觉过渡，核心挑战不在于逻辑控制，而在于保持 DOM 稳定性与动画可控性的平衡。你当前的实现通过条件渲染（!isServiceSelected ? <AllCards /> : <SingleCard />）虽逻辑清晰，但因组件完全卸载/挂载，导致无法对过渡过程施加 CSS 动画（如 opacity 或 transform）。CSS 过渡必须作用于持续存在的元素，而非“存在→消失→再存在”的瞬态节点。
✅ 推荐方案：双层容器 + 状态驱动透明度过渡
保留所有卡片在 DOM 中，仅通过 opacity 和 pointer-events 控制可见性与交互，配合 CSS transition 实现自然淡入淡出：
/* style.css */
.services-row > div {
transition: opacity 0.4s ease-in-out, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.services-row > div:not(.active) {
opacity: 0;
pointer-events: none;
transform: scale(0.95);
}
.services-row > div.active {
opacity: 1;
transform: scale(1);
}对应 JSX 修改（关键：移除条件渲染，统一渲染所有卡片，仅通过 className 控制状态）：
return (
<main>
<div>
{/* 公共头部始终显示 */}
<section className="section services-section" id="services">
<div className="container">
<div className="row">
<div className="page-header">
<div className="section-title">
<h2>Services</h2>
<p>Enhance efficiency, reliability, and quality with automated test solutions.</p>
</div>
</div>
</div>
<div className="row services-row">
{services_data.map((item, index) => (
<div
key={index}
className={`service-wrapper ${isServiceSelected && selectedServiceIndex === index ? 'active' : ''}`}
onClick={() => handleServiceClick(index)}
>
<Service
name={item.name}
imageName={item.imageName}
className={item.className}
desc={item.desc}
/>
</div>
))}
</div>
</div>
</section>
</div>
</main>
);? 优势：零 JS 动画逻辑、无 timeout 风险、支持浏览器原生硬件加速、可无缝衔接 transform 动画（如缩放、位移）。
Orderly Sdk React Hooks下载Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
⚠️ 进阶方案：分阶段状态切换（适用于复杂交互动效）
若需更精细控制（例如：旧卡片淡出 → 新卡片淡入），可引入中间状态 isTransitioning，并安全管理定时器：
const [selectedServiceIndex, setSelectedServiceIndex] = useState(null);
const [isServiceSelected, setIsServiceSelected] = useState(false);
const [isTransitioning, setIsTransitioning] = useState(false); // 新增过渡中状态
const timeoutRef = useRef(null);
const handleServiceClick = (index) => {
if (index < 0 || index >= services_data.length) return;
// 若点击同一卡片，直接收起（无过渡）
if (isServiceSelected && selectedServiceIndex === index) {
setIsServiceSelected(false);
return;
}
// 启动过渡：先隐藏当前内容
setIsTransitioning(true);
timeoutRef.current = setTimeout(() => {
setSelectedServiceIndex(index);
setIsServiceSelected(true);
setIsTransitioning(false);
}, 400); // 与 CSS transition 时间一致
};
// 组件卸载时清理定时器（防止内存泄漏）
useEffect(() => {
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, []);配合 CSS（作用于外层容器）：
.selected-service {
opacity: 0;
transition: opacity 0.4s ease;
}
.selected-service.active {
opacity: 1;
}并在渲染中使用：
{isServiceSelected ? (
<div className={`selected-service ${isTransitioning ? 'transitioning' : 'active'}`}>
{services[selectedServiceIndex]}
</div>
) : (
<section className="section services-section" id="services">
{/* ... 全量卡片渲染逻辑 */}
</section>
)}? 关键注意事项
- 性能权衡：全量保留在 DOM 中适用于卡片数量较少（如 ≤ 10）的场景；若卡片含重型子组件（如图表、视频），建议结合 React.memo 或虚拟滚动优化。
- 无障碍访问：pointer-events: none 会禁用键盘焦点，务必补充 tabIndex="-1" 或改用 aria-hidden="true" + visibility: hidden 替代。
- 动画一致性：CSS transition 时间必须与 JS setTimeout 值严格匹配，否则出现卡顿或错位。
- 响应式适配：在移动端，可额外添加 scale 或 translateY 动画增强层次感，避免单一 opacity 显得平淡。
最终，选择哪种方案取决于你的设计需求：追求简洁稳定，用纯 CSS 透明度控制；追求电影级转场，用分阶段状态 + 可控定时器。二者均优于直接条件渲染——因为真正的动画，始于 DOM 的“存在”，而非“出现”。
