React Transition Group与CSS Transition配合失效问题排查

你遇到的核心问题是误用了TransitionGroup的适用场景，它不是用来控制静态元素的显示/隐藏动画，而是专门处理动态列表的元素增删动画的，具体问题点和解决思路如下：

问题根源 #

1. TransitionGroup的工作逻辑：它依赖子元素的key属性追踪元素的挂载/卸载（也就是列表项的添加/移除），而非单纯的显示状态切换。如果你的场景只是通过props.on这个布尔值控制整组元素的显示/隐藏，TransitionGroup无法检测到“元素进入/离开”的动作，自然不会触发CSS过渡样式。
2. 缺少唯一key：即使是动态列表场景，若每个CSSTransition子元素没有设置唯一的key，TransitionGroup无法区分不同元素，也会导致动画不触发。
3. 状态控制逻辑冲突：当用TransitionGroup包裹时，你可能直接通过{props.on && <CSSTransition />}的方式控制显示，但这种条件渲染的方式，TransitionGroup无法正确捕获元素的挂载时机，无法触发动画钩子。

对应解决方案 #

场景1：仅需切换整组元素的显示/隐藏动画 #

直接移除TransitionGroup，只用CSSTransition包裹元素即可，示例：

import { CSSTransition } from 'react-transition-group';
import './styles.css';

function AnimatedSection({ on }) {
  return (
    <CSSTransition in={on} timeout={500} classNames="slide">
      <div className="section">
        {/* 你的行元素 */}
        <div className="row">行1</div>
        <div className="row">行2</div>
      </div>
    </CSSTransition>
  );
}

场景2：需要逐个添加行元素的动画（动态列表） #

如果是要实现新增行时逐个触发动画，必须用TransitionGroup，但要满足以下要求：

• 每个CSSTransition子元素必须设置唯一的key
• 通过修改数组（而非布尔值）来控制元素的添加，让TransitionGroup检测到元素的挂载动作
• 正确配置CSSTransition的timeout、classNames属性

示例代码：

import { TransitionGroup, CSSTransition } from 'react-transition-group';
import './styles.css';

function AnimatedRowList({ rows }) {
  return (
    <TransitionGroup>
      {rows.map((row) => (
        <CSSTransition key={row.id} timeout={500} classNames="fade">
          <div className="row">{row.content}</div>
        </CSSTransition>
      ))}
    </TransitionGroup>
  );
}

// 使用时，通过向rows数组添加元素触发动画
// 比如：setRows(prev => [...prev, { id: Date.now(), content: '新行' }])

对应的CSS样式：

.fade-enter {
  opacity: 0;
  transform: translateY(20px);
}
.fade-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 500ms ease-out;
}

总结 #

你之前的代码错误在于用TransitionGroup处理了它不擅长的静态元素显示隐藏场景，换成普通div后，CSSTransition能正常监听in属性的变化触发动画。如果是动态列表的逐个动画，按照上面的正确方式配置即可。

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