React(0.13) 定义一个使用动画

最新推荐文章于 2025-09-13 11:59:05 发布

weixin_33955681

最新推荐文章于 2025-09-13 11:59:05 发布

阅读量66

点赞数

文章标签： javascript ViewUI

本文介绍了一个使用ReactJS创建的动态列表应用示例，该应用利用React的CSSTransitionGroup来实现列表项的添加与删除动画效果。通过具体代码展示了如何在React组件中响应用户的输入，并动态更新列表状态。

<!DOCTYPE html>
<html>
    <head>
        <title>React JS</title>
        <script src="../build_0.13/react.js"></script>
        <script src="../build_0.13/JSXTransformer.js"></script>
        <script src="../build_0.13/react-with-addons.min.js"></script>
        <style type="text/css">
            .example-enter{color:red;}
            .example-active{color:green;}
        </style>
    </head>
    <body>
        <div id="example" ></div>
        <script type="text/jsx">
            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> ); 
                } 
            });
            
            //将组件加到对应的元素上
            React.render( <TodoList />, document.getElementById('example') );
        </script>
    </body>
</html>