http://motion.ant.design/exhibition/demo/list-anim
动画解决方案
对应到 react 中

1. CSS3：使用 ReactCSSTransitionGroup 来实现
2. JS: 仍然使用 setInterval / setTimeout / requestAnimationFrame，但不再是直接修改 DOM 的 style 属性，而是修改某个 state 值，再把这个值作用在某个 component 的 style 上。

1.列表的淡入淡出

import ReactCSSTransitionGroup  from 'react-addons-css-transition-group';
import React from "react";
require("./TodoList.css");
class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: ['hello', 'world', 'click', 'me']};
    this.handleAdd = this.handleAdd.bind(this);
  }

  handleAdd() {
    var newItems = this.state.items.concat([
      prompt('Enter some text')
    ]);
    this.setState({items: newItems});
  }

  handleRemove(i) {
    var newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({items: newItems});
  }

  render() {
    var items = this.state.items.map((item, i) => (
      <div key={item} onClick={() => this.handleRemove(i)}>
        {item}
      </div>
    ));

    return (
      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <ReactCSSTransitionGroup 
          transitionName="example" 
          transitionEnterTimeout={500} 
          transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}
export default TodoList;

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

2.底层 API: ReactTransitionGroup

ReactTransitionGroup是动画的基础。它通过 require('react-addons-transition-group')访问。当子级被声明式的从其中添加或移除（就像上面的例子）时，特殊的生命周期挂钩会在它们上面被调用。

componentWillAppear(callback)
对于被初始化挂载到 TransitionGroup 的组件，它和 componentDidMount() 在相同时间被调用 。它将会阻塞其它动画发生，直到callback被调用。它只会在 TransitionGroup
初始化渲染时被调用。

componentDidAppear()
在 传给componentWillAppear 的 回调函数被调用后调用。

componentWillEnter(callback)
对于被添加到已存在的 TransitionGroup 的组件，它和 componentDidMount() 在相同时间被调用 。它将会阻塞其它动画发生，直到callback被调用。它不会在 TransitionGroup初始化渲染时被调用。

componentDidEnter()
在传给 componentWillEnter 的回调函数被调用之后调用。

componentWillLeave(callback)
在子级从 ReactTransitionGroup 中移除时调用。虽然子级被移除了，ReactTransitionGroup将会保持它在DOM中，直到callback被调用。componentDidLeave()在willLeave callback 被调用的时候调用（与 componentWillUnmount 同一时间）。

####2.JavaScript实现方式

<ul ref='collection'> </ul>
componentDidMount: function(){
var myEl = React.findDOMNode(this.refs.collection)
}
var myImg = myEl.getElementsByTagName("img");
myImg.addEventListener(transitionend, handler)
//动画的事件名
event.propertyName === "transform"

function whichTransitionEvent(){
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}