一、

 <!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用JS 模拟动画介绍的更多相关文章

  1. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  2. React+Node.js+Express+mongoskin+MongoDB

    首发:个人博客,更新&纠错&回复 采用React + Node.js + Express + mongoskin + MongoDB技术开发的一个示例,演示地址在这里,项目源码在这里. ...

  3. vue.js之动画篇

    本文引入类库的方式均采用CND的方式,可直接复制代码到编辑器中学习和测试 不使用动画切换元素 <div id="app"> <input type="b ...

  4. React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)

    React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...

  5. FormData js对象的介绍和使用

    FormData js对象的介绍和使用 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用FormData对象可以减 ...

  6. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

  7. three.js模拟实现太阳系行星体系

    概况如下: 1.SphereGeometry实现自转的太阳: 2.RingGeometry实现太阳系星系的公转轨道: 3.ImageUtils加载球体和各行星贴图: 4.canvas中createRa ...

  8. Vue+Mock.js模拟登录和表格的增删改查

    有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...

  9. JsPlumb在react的使用方法及介绍

    JsPlumb在react的使用方法及介绍 一．相关资料来源: 1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_ ...

随机推荐

  1. PHP中文URL编解码(urlencode()rawurlencode()

    PHP中对于URL进行编码,可以使用 urlencode() 或者 rawurlencode(),二者的区别是前者把空格编码为 '+',而后者把空格编码为 '%20',不过应该注意的是,在编码时应该只 ...

  2. 用MySQL log调试程序

    打开my.ini文件 在[mysqld]的下面加上log = c:/mysql_query.log.txt重启mysql 以后你用可以用editplus查看你运行的sql了,不用在程序里一句句的用lo ...

  3. 【quartz】 数据库方式管理任务

    public static void Run(bool inClearJobs, bool inScheduleJobs) { var properties = new NameValueCollec ...

  4. 从零开始学ios开发（八）：Autorotation and Autosizing

    不好意思,这一篇间隔的时间有点长,最近实在是事情太多,耽搁了,好了,长话短说,下面继续学习ios. 这次学习的内容是Autorotation和Autosizing,Autorotation就是屏幕内容 ...

  5. mac升级yosemite后安装gd的freetype扩展

    Mac升级系统到 Yosemite 10.10,对于各位Coder来说,还是需要一些时间来折腾的! @星空之下 同学反映 PHPCMS 的验证码图片不能正常显示,反馈该验证码需要GD库支持FreeTy ...

  6. [转]如何利用ndk-stack工具查看so库的调用堆栈【代码示例】？

    如何利用ndk-stack工具查看so库的调用堆栈[代码示例]? http://hi.baidu.com/subo4110/item/d00395b3bf63e4432bebe36d Step1:An ...

  7. VB 思维导图总结（二）

    第六章.过程... 第七章.菜单工具栏... 第八章.文件系统处理.. 第九章.键盘和鼠标事件...

  8. ubuntu14.04 安装matlab r2013a

    神奇的linux. 进入主题:matlab相信是不少工程人员缺少不了的工具,就我所在的通信行业更是如此,matlab的linux版本是和windows版本同步更新, 不过r2012之后只提供64位版本 ...

  9. 20145120 《Java程序设计》第2周学习总结

    20145120 <Java程序设计>第2周学习总结 教材学习内容总结 因为前面有学习过C语言以及汇编语言,类型.运算符.流程控制等很多都是之前接触过的,因此在学习第三章的时候感觉并非十分 ...

  10. WPF 多线程处理(1)

    WPF 多线程处理(1) WPF 多线程处理(2) WPF 多线程处理(3) WPF 多线程处理(4) WPF 多线程处理(5) WPF 多线程处理(6) 废话不多说,先上图: 多线程处理数据后在th ...