ReactCSSTransitionGroup入场动画正常，离场动画失效问题求助

嘿，我之前也踩过ReactCSSTransitionGroup离场动画的坑，结合你的代码来看，大概率是这几个常见问题导致的，咱们一步步排查修复：

1. 确保元素是真正从DOM中移除，而非隐藏 #

ReactCSSTransitionGroup的离场动画触发的前提是：子元素被从组件的children列表中完全移除，而不是通过display: none、visibility: hidden或者其他CSS方式隐藏。

比如你应该用条件渲染（比如{isTaskVisible && <div className="task-card">...</div>}）来控制卡片的存在，而不是给卡片加个hidden类。如果只是隐藏元素，组件不会检测到children的变化，自然不会触发离场动画。

2. 检查transitionName对应的CSS类是否完整 #

你的transitionName是taskAnimation，那必须定义好离场相关的CSS类，很多人会漏写-leave-active类或者过渡属性：

/* 入场动画（你已经生效了，这里可以参考） */
.taskAnimation-appear {
  opacity: 0;
  transform: translateX(100%);
}

.taskAnimation-appear.taskAnimation-appear-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 1500ms ease-in-out;
}

/* 离场动画——重点是这两个类 */
.taskAnimation-leave {
  opacity: 1;
  transform: translateX(0);
}

.taskAnimation-leave.taskAnimation-leave-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 1500ms ease-in-out; /* 必须设置过渡属性，否则没有动画效果 */
}

要注意：-leave是离场初始状态，-leave-active是离场结束状态，并且要给-leave-active加上transition属性来指定动画时长和曲线。

3. 给每个卡片绑定唯一的key属性 #

React依赖key来识别元素的增减，如果你没给task-card设置唯一的key，React会复用DOM元素，不会触发离场动画。你应该用任务的唯一标识（比如task.id）作为key：

<ReactCSSTransitionGroup 
  transitionName="taskAnimation" 
  transitionAppear={true} 
  transitionAppearTimeout={1500} 
  transitionLeave={true} 
  transitionLeaveTimeout={1500}
>
  {/* 假设你是遍历任务列表，一定要加key */}
  {this.props.tasks.map(task => (
    <div className="task-card" key={task.id}>
      <div className="box">
        <div className="task-photo">
          <figure className="task-photo-figure">
            <img src="../../img/icon.png" className="round-photo"/>
          </figure>
        </div>
        <div className="task-description">
          <h3>{task.taskName}</h3>
          <h3>{task.duration}</h3>
        </div>
        <div className="task-buttons">
          <ul className="task-buttons-list">
            {/* 按钮内容 */}
          </ul>
        </div>
      </div>
    </div>
  ))}
</ReactCSSTransitionGroup>

4. 考虑升级到新版react-transition-group组件 #

ReactCSSTransitionGroup是旧版的API，现在官方推荐使用react-transition-group包的TransitionGroup和CSSTransition组件，旧版可能存在一些已知bug。升级后代码会更清晰，也更少踩坑：

首先安装依赖：

npm install react-transition-group

然后改写你的组件：

import { TransitionGroup, CSSTransition } from 'react-transition-group';

// 组件内部渲染部分
<TransitionGroup>
  {this.props.tasks.map(task => (
    <CSSTransition
      key={task.id}
      timeout={1500}
      classNames="taskAnimation"
      appear={true}
    >
      <div className="task-card">
        {/* 卡片内容和之前一样 */}
      </div>
    </CSSTransition>
  ))}
</TransitionGroup>

对应的CSS类名改为：

.taskAnimation-appear {
  opacity: 0;
  transform: translateX(100%);
}

.taskAnimation-appear-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 1500ms ease-in-out;
}

.taskAnimation-exit {
  opacity: 1;
  transform: translateX(0);
}

.taskAnimation-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 1500ms ease-in-out;
}

按照上面的步骤排查，应该就能解决离场动画不生效的问题啦！

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