React学习笔记（7）---动画效果实现

来源：互联网发布：手机电视投影软件编辑：程序博客网时间：2024/05/22 12:05
1. 网页动画
在react中使用CSS3动画效果：
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="build/react-with-addons.js"></script>    <script src="build/JSXTransformer.js"></script>    <style>        .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;        }    </style></head><body>    <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></TodoList>, document.body);    </script></body></html>
0 0