React CSS Transitions未触发：如何为渲染组件添加动画？

我来帮你排查一下动画没触发的问题，主要原因是当前的条件渲染方式和TransitionGroup的工作机制不匹配，咱们一步步来修复：

问题核心 #

你现在是条件渲染整个<ReactCSSTransitionGroup>组件——当isLoading变为false时，整个TransitionGroup才首次挂载到DOM中。虽然你设置了transitionAppear={true}，但可能因为配置细节或CSS问题导致动画没触发，更合理的做法是让TransitionGroup始终存在，只动态切换它的子内容。

修复步骤 #

1. 调整组件结构：让TransitionGroup常驻DOM #

把条件判断放到TransitionGroup内部，只动态渲染内容部分，同时给动态内容加唯一key（这是React识别元素添加/移除的关键）：

render() { 
  return ( 
    <div className={`App ${css.host}`}> 
      <Preloader /> 
      <ReactCSSTransitionGroup 
        transitionAppear={true} 
        transitionName={{ 
          enter: css.example__enter,
          enterActive: css.example__enter_active,
          appear: css.example__appear,
          appearActive: css.example__appear_active
        }} 
        transitionAppearTimeout={300} 
        transitionEnterTimeout={300} 
        transitionLeaveTimeout={300} 
      >
        {/* 用key标记动态内容，确保React能检测到元素变化 */}
        {!this.props.isLoading && (
          <div key="page-content">
            <h1>Title</h1> 
            <Version /> 
            <Footer /> 
          </div>
        )}
      </ReactCSSTransitionGroup> 
    </div> 
  ); 
}

2. 确保CSS类名匹配且动画属性正确 #

你的CSS需要对应TransitionGroup配置的类名，比如：

/* 初始进入状态 */
.example__enter {
  opacity: 0;
  transform: translateY(20px);
  transition: all 300ms ease-out;
}

/* 进入动画激活状态 */
.example__enter_active {
  opacity: 1;
  transform: translateY(0);
}

/* 首次挂载（appear）的初始状态（可选） */
.example__appear {
  opacity: 0;
}

.example__appear_active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

3. 区分enter和appear动画的触发场景 #

• appear：当TransitionGroup自身首次挂载时触发动画（如果你的TransitionGroup一开始就存在，这个动画会在页面加载时触发）
• enter：当TransitionGroup已经存在，内部子元素被动态添加时触发动画（这正是你需要的——isLoading变为false时，内容被添加到已存在的TransitionGroup中）

所以如果只需要加载完成后的内容入场动画，重点配置enter和enterActive即可。

进阶：使用更现代的react-transition-group #

ReactCSSTransitionGroup是较旧的API，现在推荐使用官方维护的react-transition-group库，API更清晰灵活：

先安装依赖：

npm install react-transition-group

然后修改代码：

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

// ...

render() { 
  return ( 
    <div className={`App ${css.host}`}> 
      <Preloader /> 
      <TransitionGroup>
        {!this.props.isLoading && (
          <CSSTransition
            key="page-content"
            timeout={300}
            classNames={{
              enter: css.example__enter,
              enterActive: css.example__enter_active,
            }}
          >
            <div>
              <h1>Title</h1> 
              <Version /> 
              <Footer /> 
            </div>
          </CSSTransition>
        )}
      </TransitionGroup> 
    </div> 
  ); 
}

这样配置后，当isLoading变为false时，内容就会平滑触发入场动画啦～

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