React(0.13)定義一個使用動畫

wensongyu發表於2016-03-25
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>

 


相關文章