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

试一下吧！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!