http://motion.ant.design/exhibition/demo/list-anim
动画解决方案
对应到 react 中
- CSS3：使用 ReactCSSTransitionGroup 来实现
- 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];
}
}
}
