它看起来像CSSTransitionGroup用于在初始安装时设置动画，但从 React v0.8.0 左右开始不再使用。有关更多信息，请参阅https://github.com/facebook/react/issues/1304。

一种解决方案是在安装<h1>后简单地<HelloWorld>安装，如下所示：

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  getInitialState: function() {
    return { mounted: false };
  },
  componentDidMount: function() {
    this.setState({ mounted: true });
  },
  render: function() {
    var child = this.state.mounted ?
      <h1>Hello world</h1> :
      null;

    return (
      <ReactTransitionGroup transitionName="example">
        {child}
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

现场示例：http : //codepen.io/peterjmag/pen/wBMRPX

请注意，CSSTransitionGroup它用于在动态添加、删除和替换子组件时过渡它们，不一定用于在初始渲染时为它们设置动画。玩弄这种TodoList的Codepen（改编自本例中的文档做出react），以明白我的意思。列表项在添加和删除时淡入和淡出，但它们不会在初始渲染时淡入。

编辑：最近引入了一个新的“出现”过渡阶段，以允许安装动画效果。有关详细信息，请参阅https://github.com/facebook/react/pull/2512。（提交已经合并到 master 中，所以我想它会随着 v0.12.2 发布。）理论上，你可以做这样的事情来使<h1>挂载淡入：

JS

...
<ReactTransitionGroup transitionName="example" transitionAppear={true}>
    <h1>Hello world</h1>
</ReactTransitionGroup>
...

CSS

.example-appear {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}

我更深入地研究了这个问题。使用当前版本的 ReactJS，似乎无法进行初始 CSS 转换。更多信息和想法在这里。

很可能事情会随着 v0.13.x 而改变。你可以看看源代码，其特点是transitionAppear props。

编辑：我从 GitHub 下载了最新的 ReactJS ( v0.13.0 - alpha ) 并构建了它。如果您使用transitionAppearprops（要显式设置为 true），那么现在一切都会相应地工作。您将在下面找到更新的 CSS 和 JSX 以及实时示例：

CSS：

.example-appear {
  opacity: 0.01;
  transition: opacity 0.5s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}

用于 ReactJS v0.13.0 的 JSX - alpha：

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  render: function() {
    return (
      <ReactTransitionGroup transitionName="example" transitionAppear={true}>
          <h1>Hello world</h1>      
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

现场示例：http : //codepen.io/lanceschi/pen/NPxoGV

干杯，L

出现

通常，如果<Transition>组件在安装时显示，则组件不会转换。如果您想在第一个挂载设置appear为true时转换，则组件将在<Transition>挂载后立即转换。 来自 react-transition-group 文档

使用示例

JSX：

<TransitionGroup>
  <CSSTransition classNames="fade" appear={true} >
    <h1>Hello world!</h1>
  </CSSTransition>
</TransitionGroup>

CSS：

.fade-appear {
  opacity: 0.01;
  z-index: 1;
}
.fade-appear.fade-appear-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

作为：

• react v16.6.3
• react过渡组 v2.5.1