ReactCSSTransitionGroup的enter/leave动画失效及路由切换无动画问题排查

看起来你遇到了react-addons-css-transition-group中enter/leave动画不生效、路由切换无过渡的典型问题，结合你的场景，我整理了几个最可能的原因和对应的解决方法：

一、基础配置缺失（最常见） #

你提到appear动画正常，说明transitionName和对应CSS类的基础逻辑没问题，但enter/leave动画需要额外的超时配置才能正常触发：

• 必须给ReactCSSTransitionGroup添加transitionEnterTimeout和transitionLeaveTimeout属性，否则React无法判断何时移除动画类，直接跳过动画流程。
• 示例正确配置：

<ReactCSSTransitionGroup
  transitionName="modal"
  // 必须设置enter/leave的超时时间，和动画时长对应
  transitionEnterTimeout={300}
  transitionLeaveTimeout={300}
  transitionAppear={true}
  transitionAppearTimeout={300}
>
  {/* 你的弹窗/路由组件 */}
</ReactCSSTransitionGroup>

二、组件挂载/卸载逻辑错误 #

ReactCSSTransitionGroup是通过子元素的真实挂载/卸载触发enter/leave动画的，如果你用了错误的显示隐藏方式，就不会触发动画：

• ❌ 错误方式：用display: none、visibility: hidden或opacity: 0等CSS属性隐藏组件（元素仍在DOM中，未被卸载）
• ✅ 正确方式：用条件渲染（比如{isModalOpen && <Modal />}）让组件被真实添加/移除DOM

三、路由场景的关键配置遗漏 #

路由切换时首次加载正常、切换无过渡，大概率是因为没有给路由组件添加唯一key：

• React会复用相同key的组件，导致旧页面不会被卸载、新页面不会触发挂载动画。你需要给路由组件绑定和路径相关的唯一key，比如location.pathname或location.key：

<ReactCSSTransitionGroup
  transitionName="page"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={500}
>
  {/* 给Route添加key，确保路由切换时触发组件卸载/挂载 */}
  <Route 
    key={this.props.location.pathname} 
    path="/your-page" 
    component={YourPage} 
  />
</ReactCSSTransitionGroup>

四、CSS动画写法错误 #

检查你的enter/leave类是否符合规范：

• enter类定义动画初始状态（比如opacity: 0、transform: translateY(-20px)）
• enter-active类定义动画结束状态+过渡属性
• leave类定义离开前的初始状态（即组件正常显示的状态）
• leave-active类定义离开结束状态+过渡属性
  示例CSS：

.page-enter {
  opacity: 0;
  transform: translateX(100%);
}
.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 500ms ease-in;
}
.page-leave {
  opacity: 1;
  transform: translateX(0);
}
.page-leave-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 500ms ease-out;
}

五、库版本兼容性问题 #

react-addons-css-transition-group是React旧版的过渡组件，已经被官方废弃，在React 16+的Fiber架构下可能存在兼容性问题。推荐升级到官方维护的react-transition-group（v2+），它的API更灵活，兼容性更好，路由场景的动画实现也更清晰：

import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { Route, Switch, withRouter } from 'react-router-dom';

class App extends Component {
  render() {
    const { location } = this.props;
    return (
      <TransitionGroup>
        <CSSTransition
          key={location.key}
          timeout={500}
          classNames="page"
          appear={true}
        >
          <Switch location={location}>
            <Route path="/home" component={Home} />
            <Route path="/about" component={About} />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    );
  }
}

export default withRouter(App);

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