javascript - React 组件和 CSSTransitionGroup

Question

早期使用 Facebook ReactJS。简单的 CSS 淡入过渡。它与 ReactJS v0.5.1 一起按预期工作。它不适用于 v11.1、v12.0、v12.1。这是 CSS 和 JSX:

CSS

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

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

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

ReactJS v12.1 的 JSX

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

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

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

这是 Codepens 的列表:

• v0.5.1 http://codepen.io/lanceschi/pen/ByjGPW
• v0.11.1 http://codepen.io/lanceschi/pen/LEGXgP
• v0.12.0 http://codepen.io/lanceschi/pen/ByjGOR
• v0.12.1 http://codepen.io/lanceschi/pen/YPwROy

感谢任何帮助。

干杯， 卢卡

Answer 1

看起来像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用于在动态添加、删除和替换子组件时转换子组件，不一定用于在初始渲染时对它们进行动画处理。玩转 this TodoList Codepen (改编自 this example in the React docs )看看我的意思。列表项在添加和删除时会淡入和淡出，但它们不会在初始渲染时淡入。

编辑:最近引入了一个新的“出现”过渡阶段，以实现安装时的动画效果。参见 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;
}