认识React动画

在很久之前动画是需要操作DOM的

随着浏览器的升级以及新的CSS3的普及，在动画方面又有了一些新的选择，React对于动画的支持是提供了一个ReactTransitonGroup插件做为底层API来完成的，相应的它有一个完整的生命周期来驱动动画的完成。当然，它也提供了一个高级API ReactCSSTransitionGroup来简单的实现CSS动画的切换与过渡。

你需要知道CSS动画大部分情况下你用替换class名，这就是React高级API给你提供的帮助

假设我们有一个需要淡入淡出的需求（下列部分的思路从官方网站而来）

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

var TodoList = React.createClass({
  getInitialState: function() {
    return {items: ['hello', 'world', 'click', 'me']};
  },
  handleAdd: function() {
    var newItems =
      this.state.items.concat([prompt('Enter some text')]);
    this.setState({items: newItems});
  },
  handleRemove: function(i) {
    var newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({items: newItems});
  },
  render: function() {
    var items = this.state.items.map(function(item, i) {
      return (
        <div key={item} onClick={this.handleRemove.bind(this, i)}>
          {item}
        </div>
      );
    }.bind(this));
    return (
      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
});

需要注意的地方是你要为ReactCSSTransitionGroup的子组件提供一个关键key，这个key是为了让React知道你添加了什么以及删除了什么。

ReactCSSTransitionGroup组件提供的逻辑是，当你添加一个组件到ReactCSSTransitionGroup组件时，首先会添加一个transitionName属性的class名（你的props.transitionName是什么就会添加一个transitionName-enter的class名），在下一时刻又会马上添加一个transitionName-enter-active的class名。

相同的当你需要淡出动画时，首先会被添加的是-leave，再下一时刻会被添加-leave-active。

还需要注意的是ReactCSSTransitionGroup需要被挂载到DOM上

禁止动画

当你需要禁止动画时只需要设置 transitionEnter={false} 或者 transitionLeave={false}。

课程完结，新的开始

至此面向初中级的react课程正式结束，目前我正在积极的准备一下个中级课程《运用react-router和其自身的state编写完整的Web应用》，敬请期待，搜索 fed-talk 关注微信公众号，来知晓下一阶段的课程信息或其他对于你所帮助的信息。