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

高級API：ReactCSSTransitionGroup

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

快速開始

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

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的所有子級提供鍵屬性，即使只渲染一項(xiàng)。這就是React確定哪一個(gè)子級插入了，移除了，或者停留在那里。

在這個(gè)組件當(dāng)中，當(dāng)一個(gè)新的項(xiàng)被添加到ReactCSSTransitionGroup，它將會被添加example-enter類，然后在下一時(shí)刻被添加example-enter-activeCSS類。這是一個(gè)基于transitionName prop的約定。

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

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

你將注意到，當(dāng)你嘗試移除一項(xiàng)的時(shí)候，ReactCSSTransitionGroup保持該項(xiàng)在DOM里。如果你正使用一個(gè)帶有插件的未壓縮的React構(gòu)建版本，你將會看到一條警告：React期待一次動畫或者過渡發(fā)生。那是因?yàn)?code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; padding: 2px 4px; color: rgb(45, 133, 202); background-color: rgb(249, 242, 244); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">ReactCSSTransitionGroup保持你的DOM元素一直在頁面上，直到動畫完成。嘗試添加這段CSS代碼：

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

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

為了能夠給它的子級應(yīng)用過渡效果，ReactCSSTransitionGroup必須已經(jīng)掛載到了DOM。下面的例子不會生效，因?yàn)?code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; padding: 2px 4px; color: rgb(45, 133, 202); background-color: rgb(249, 242, 244); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">ReactCSSTransitionGroup被掛載到新項(xiàng)，而不是新項(xiàng)被掛載到ReactCSSTransitionGroup里。將這個(gè)與上面的快速開始部分比較一下，看看有什么差異。

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

讓一項(xiàng)或者零項(xiàng)動起來（Animating One or Zero Items）

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

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

禁用動畫

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

注意：

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

底層的API：ReactTransitionGroup

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

componentWillEnter(callback)

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

componentDidEnter()

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

componentWillLeave(callback)

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

componentDidLeave()

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

渲染一個(gè)不同的組件

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

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

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

注意：

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

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

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