React Component和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;
}

JSX for ReactJS v12.1

/**@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它用于在动态添加,删除和替换子组件时转换它们,而不一定是在初始渲染时为它们设置动画.玩这个TodoList Codepen(改编自React docs中的这个例子)来看看我的意思.列表项在添加和删除时淡入和淡出,但它们不会在初始渲染时淡入.

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

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

Answer 2

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

最有可能的事情会随着v0.13.x而改变.您可以查看具有transitionAppear 道具的源代码.

编辑:我从GitHub下载了最新的ReactJS(v0.13.0-alpha)并构建了它.如果你使用transitionAppear 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