動畫

React為動畫提供一個ReactTransitonGroup插件組件作為一個底層的API，一個ReactCSSTransitionGroup來簡單地實現(xiàn)基本的CSS動畫和過渡。

高級API：ReactCSSTransitionGroup

ReactCSSTransitionGroup是基于ReactTransitionGroup的，在React組件進入或者離開DOM的時候，它是一種簡單地執(zhí)行CSS過渡和動畫的方式。這個的靈感來自于優(yōu)秀的ng-animate庫。

快速開始

ReactCSSTransitionGroup是ReactTransitions的接口。這是一個簡單的元素，包含了所有你對其動畫感興趣的組件。這里是一個例子，例子中我們讓列表項淡入淡出。

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;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;
    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">
          {items}        </ReactCSSTransitionGroup>
      </div>
    );
  }
});

注意：

你必須為ReactCSSTransitionGroup的所有子級提供鍵屬性，即使只渲染一項。這就是React確定哪一個子級插入了，移除了，或者停留在那里。

在這個組件當中，當一個新的項被添加到ReactCSSTransitionGroup，它將會被添加example-enter類，然后在下一時刻被添加example-enter-activeCSS類。這是一個基于transitionName prop的約定。

你可以使用這些類來觸發(fā)一個CSS動畫或者過渡。例如，嘗試添加這段CSS代碼，然后插入一個新的列表項：

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

你將注意到，當你嘗試移除一項的時候，ReactCSSTransitionGroup保持該項在DOM里。如果你正使用一個帶有插件的未壓縮的React構(gòu)建版本，你將會看到一條警告：React期待一次動畫或者過渡發(fā)生。那是因為ReactCSSTransitionGroup保持你的DOM元素一直在頁面上，直到動畫完成。嘗試添加這段CSS代碼：

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

一組動畫必須要掛載了才能生效

為了能夠給它的子級應用過渡效果，ReactCSSTransitionGroup必須已經(jīng)掛載到了DOM。下面的例子不會生效，因為ReactCSSTransitionGroup被掛載到新項，而不是新項被掛載到ReactCSSTransitionGroup里。將這個與上面的快速開始部分比較一下，看看有什么差異。

  render: function() {
    var items = this.state.items.map(function(item, i) {
      return (        <div key={item} onClick={this.handleRemove.bind(this, i)}>
          <ReactCSSTransitionGroup transitionName="example">
            {item}          </ReactCSSTransitionGroup>
        </div>
      );
    }, this);
    return (      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        {items}      </div>
    );
  }

讓一項或者零項動起來（Animating One or Zero Items）

雖然在上面的例子中，我們渲染了一個項目列表到ReactCSSTransitionGroup里，ReactCSSTransitionGroup的子級可以是一個或零個項目。這使它能夠讓一個元素實現(xiàn)進入和離開的動畫。同樣，你可以通過移動一個新的元素來替換當前元素。隨著新元素的移入，當前元素移出。例如，我們可以由此實現(xiàn)一個簡單的圖片輪播器：

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var ImageCarousel = React.createClass({
  propTypes: {
    imageSrc: React.PropTypes.string.isRequired
  },
  render: function() {
    return (      <div>
        <ReactCSSTransitionGroup transitionName="carousel">
          <img src={this.props.imageSrc} key={this.props.imageSrc} />
        </ReactCSSTransitionGroup>
      </div>
    );
  }
});

禁用動畫

如果你想，你可以禁用入場或者出場動畫。例如，有些時候，你可能想要一個入場動畫，不要出場動畫，但是ReactCSSTransitionGroup會在移除DOM節(jié)點之前等待一個動畫完成。你可以給ReactCSSTransitionGroup添加transitionEnter={false}或者transitionLeave={false} props來禁用這些動畫。

注意：

當使用ReactCSSTransitionGroup的時候，沒有辦法通知你在過渡效果結(jié)束或者在執(zhí)行動畫的時候做一些復雜的運算。如果你想要更多細粒度的控制，你可以使用底層的ReactTransitionGroup API，該API提供了你自定義過渡效果所需要的函數(shù)。

底層的API：ReactTransitionGroup

ReactTransitionGroup是動畫的基礎。它可以通過React.addons.TransitionGroup得到。當子級被添加或者從其中移除（就像上面的例子）的時候，特殊的生命周期函數(shù)就會在它們上面被調(diào)用。

componentWillEnter(callback)

在組件被添加到已有的TransitionGroup中的時候，該函數(shù)和componentDidMount()被同時調(diào)用。這將會阻塞其它動畫觸發(fā)，直到callback被調(diào)用。該函數(shù)不會在TransitionGroup初始化渲染的時候調(diào)用。

componentDidEnter()

該函數(shù)在傳給componentWillEnter的callback函數(shù)被調(diào)用之后調(diào)用。

componentWillLeave(callback)

該函數(shù)在子級從ReactTransitionGroup中移除的時候調(diào)用。雖然子級被移除了，ReactTransitionGroup將會使它繼續(xù)在DOM中，直到callback被調(diào)用。

componentDidLeave()

該函數(shù)在willLeave callback被調(diào)用的時候調(diào)用（與componentWillUnmount是同一時間）。

渲染一個不同的組件

默認情況下ReactTransitionGroup渲染一個span。你可以通過提供一個component prop來改變這種行為。例如，以下是你將如何渲染一個<ul>：

<ReactTransitionGroup component="ul">
  ...</ReactTransitionGroup>

每一個React能渲染的DOM組件都是可用的。但是，組件并不需要是一個DOM組件。它可以是任何你想要的React組件；甚至是你自己已經(jīng)寫好的！

注意：

v0.12之前，當使用DOM組件的時候，組件 prop需要是一個指向React.DOM.*的引用。既然組件簡單地傳遞到了React.createElement，它必須是一個字符串。組裝的組件必須傳遞構(gòu)造函數(shù)。

任何額外的、用戶定義的屬性將會成為已渲染的組件的屬性。例如，以下是你將如何渲染一個帶有css類的<ul>：

<ReactTransitionGroup component="ul" className="animated-list">
  ...</ReactTransitionGroup>