ReactJS学习系列课程（React 动画使用）

常用Angular的开发者，一定熟悉angular的Animation的使用，其实React的动画效果原理和Angular是极其相似的。

首先，我么需要导入一个额外的库（Angular也一样哦），

<script src="../libs/react-with-addons.min.js"></script>

下面我们引入Transition插件：

//    引入react-with-addons中的CSSTransitionGroup插件
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>
);
}
});
ReactDOM.render(<TodoList></TodoList>, document.body);

从以上代码中，我们不难看出，在创建Element时我们用ReactCSSTransitionGroup组合在element中，并指定transitionName.

实际上，给元素添加transitionName=”example”意味着给它添加了添加了以下4个class：example- xxx。

看看代码：

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

好啦这就是Animation的使用，实际上只是添加了几个class 而已，和angular一样吧。

试一下吧！