React Component and CSSTransitionGroup

看起来像CSSTransitionGroup用于在初始挂载时进行动画处理，但从 React v0.8.0 左右开始就不再了。有关详细信息，请参阅 https://github.com/facebook/react/issues/1304。

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

/**@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代码笔(改编自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道具。

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

.CSS：

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

JSX for ReactJS v0.13.0 - 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>装载后立即转换。 来自反应转换组文档

使用示例

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;
}

截至：

• 反应 v16.6.3
• 反应转换组 v2.5.1