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一样吧。

试一下吧！