React用JS 模拟动画介绍
2015-12-20 16:34
651 查看
一、
二、结果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>React动画</title> </head> <body> <script src="../react-0.13.2/build/react.js"></script> <script src="../react-0.13.2/build/JSXTransformer.js"></script> <script type="text/jsx"> var Positioner = React.createClass({ getInitialState: function() { return { position: 0 }; }, resolveSetTimeout: function() { if (this.state.position < this.props.position) { this.setState({ position: this.state.position + 1 }); } }, componentDidUpdate: function() { if (this.props.position) { setTimeout(this.resolveSetTimeout, this.props.timeoutMs); } }, render: function() { var divStyle = { marginLeft: this.state.position }; return <div style={divStyle}> This will animate! </div> } }) React.render(<Positioner></Positioner>, document.body); React.render(<Positioner position={100} timeoutMs={10}></Positioner>, document.body); </script> </body> </html>
二、结果
相关文章推荐
- 如何在React中使用CSS3动画
- java识别验证码-用tess4j实现超简单调用tessreact-orc来破解验证码
- React表单组件自定义-可控及不可控组件
- 大神眼中的React Native--备用
- React事件处理函数的bind复用和name复用
- React表单元素的使用
- ReactJS学习笔记(三)
- 用ReactJS和Python的Flask框架编写留言板的代码示例
- 用ReactJS和Python的Flask框架编写留言板的代码示例
- React可控组件与不可控组件
- React组件-mixin
- React-组件嵌套-子组件通过委托向父组件传值
- react-native 布局
- 如何创建一个Android原生的react-native组件(一)
- ReactiveCocoa源码拆分解析(一)
- React事件属性
- React事件函数简介
- React编写文本评论框
- React属性和状态对比
- React addons载入方式变化