http://motion.ant.design/exhibition/demo/list-anim
動(dòng)畫(huà)解決方案
對(duì)應(yīng)到 react 中

1. CSS3：使用 ReactCSSTransitionGroup 來(lái)實(shí)現(xiàn)
2. JS: 仍然使用 setInterval / setTimeout / requestAnimationFrame硬爆，但不再是直接修改 DOM 的 style 屬性懦傍，而是修改某個(gè) state 值，再把這個(gè)值作用在某個(gè) 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是動(dòng)畫(huà)的基礎(chǔ)卫病。它通過(guò) require('react-addons-transition-group')訪問(wèn)都毒。當(dāng)子級(jí)被聲明式的從其中添加或移除（就像上面的例子）時(shí)臂外，特殊的生命周期掛鉤會(huì)在它們上面被調(diào)用粤蝎。

componentWillAppear(callback)
對(duì)于被初始化掛載到 TransitionGroup 的組件真仲，它和 componentDidMount() 在相同時(shí)間被調(diào)用 。它將會(huì)阻塞其它動(dòng)畫(huà)發(fā)生初澎，直到callback被調(diào)用秸应。它只會(huì)在 TransitionGroup
初始化渲染時(shí)被調(diào)用。

componentDidAppear()
在 傳給componentWillAppear 的 回調(diào)函數(shù)被調(diào)用后調(diào)用碑宴。

componentWillEnter(callback)
對(duì)于被添加到已存在的 TransitionGroup 的組件软啼，它和 componentDidMount() 在相同時(shí)間被調(diào)用 。它將會(huì)阻塞其它動(dòng)畫(huà)發(fā)生延柠，直到callback被調(diào)用祸挪。它不會(huì)在 TransitionGroup初始化渲染時(shí)被調(diào)用。

componentDidEnter()
在傳給 componentWillEnter 的回調(diào)函數(shù)被調(diào)用之后調(diào)用贞间。

componentWillLeave(callback)
在子級(jí)從 ReactTransitionGroup 中移除時(shí)調(diào)用贿条。雖然子級(jí)被移除了，ReactTransitionGroup將會(huì)保持它在DOM中增热，直到callback被調(diào)用整以。componentDidLeave()在willLeave callback 被調(diào)用的時(shí)候調(diào)用（與 componentWillUnmount 同一時(shí)間）。

####2.JavaScript實(shí)現(xiàn)方式

<ul ref='collection'> </ul>
componentDidMount: function(){
var myEl = React.findDOMNode(this.refs.collection)
}
var myImg = myEl.getElementsByTagName("img");
myImg.addEventListener(transitionend, handler)
//動(dòng)畫(huà)的事件名
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];
}
}
}