如何实现React组件淡入淡出切换，react-transition-group无效如何解决？

可以使用 react-transition-group 实现该需求，你的现有写法存在两处错误：

1. 两个<CSSTransition>使用了相同的key={showModal}，React Diff 时会判定为同一个组件，只会更新属性不会触发挂载/卸载对应的过渡逻辑，不会添加动画类名
2. <TransitionGroup>会自动监听内部直接子元素的增删，自动给子<CSSTransition>注入in属性控制过渡状态，你手动传入in属性会覆盖默认逻辑，导致过渡无法触发

修正方案1：调整TransitionGroup写法 #

<TransitionGroup>
  {showModal === 'SIGNIN' && (
    <CSSTransition classNames='fade' timeout={220} key='signin'>
      <div> 
        <SignIn />
      </div>
    </CSSTransition>
  )}
  {showModal === 'JOIN' && (
    <CSSTransition classNames='fade' timeout={220} key='join'>
      <div> 
        <Join />
      </div>
    </CSSTransition>
  )}
</TransitionGroup>

修正方案2：使用更适配互斥切换场景的SwitchTransition #

你需要的「旧组件先淡出、新组件再淡入」的场景，更适合用react-transition-group自带的SwitchTransition组件实现，代码更简洁：

import { SwitchTransition, CSSTransition } from "react-transition-group";

// 组件内逻辑
<SwitchTransition mode="out-in">
  <CSSTransition
    key={showModal}
    timeout={220}
    classNames="fade"
  >
    <div>
      {showModal === 'SIGNIN' ? <SignIn /> : <Join />}
    </div>
  </CSSTransition>
</SwitchTransition>

mode="out-in"参数会严格控制先执行旧组件的退出动画，等退出完成后再执行新组件的进入动画，完全符合你的需求。

配套CSS样式 #

你需要添加对应的过渡样式才能看到效果：

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 220ms ease-in;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 220ms ease-out;
}

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