React(0.13) 定义一个使用动画
2016-03-25 16:40
741 查看
<!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>
相关文章推荐
- react-native开源组件react-native-wechat学习
- react-native开源组件react-native-wechat学习
- React-Native 学习笔记
- 最快让你上手ReactiveCocoa之基础篇
- React(0.13) 定义一个checked组件
- React(0.13) 定义一个多选的组件
- 【长篇高能】ReactiveCocoa 和 MVVM 入门
- React(0.13) 定义一个input组件,使其输入的值转为大写
- React Native第1天——环境配置及知识体系
- React Native 环境配置
- react、redux什么的都用起来 【3】穿越spa的路由
- react.js学习(1) webpack
- React Native平台与Android本地模块之间的调用
- 最快让你上手ReactiveCocoa之基础篇
- ReactiveCocoa 函数响应式编程简介 链式编程 函数式编程 响应式编程
- RAC(ReactiveCocoa)
- React Native 简介
- Reactive Programming with RxJS (读书笔记)
- React Native ios 设置状态栏文本颜色
- React 简介