React为动画提供了一个附加组件ReactTransitionGroup,这个附加组件是动画的底层API,并且还提供了一个附件组件ReactCSSTransitionGroup,ReactCSSTransitionGroup能够简单的实现基于css的动画和转换
高级API ReactCSSTransitionGroup
ReactCSSTransitionGroup是一个基于ReactTransitionGroup的API,当一个React组件插入或者移除DOM时,它是一种简单的去执行css转换和动画的方法
以一个demo举例
ReactCSSTransitionGroup是ReactTransitions的接口,可以把它当做一个简单的元素,它包裹着所有想添加动画效果的React组件。下面有一个例子:
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
var React = require('react');
var ReactDOM = require('react-dom');
var data = ['one','two','three'];
var Control = React.createClass({
getInitialState:function(){
return {
'items':this.props.data
}
},
addItem:function(){
var newItems = this.state.items.concat('four');
this.setState({
'items':newItems
});
},
removeItem:function(i){
var newItems = this.state.items;
newItems.splice(i,1);
this.setState({
'items':newItems
});
},
render:function(){
var $this = this;
var List = this.state.items.map(function(value,index){