一、

 <!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. rhel_7.x 安装mysql

    http://database.51cto.com/art/201310/413006.htm MariaDB和MySQL --mysql-5.7.12-1.el7.x86_64.rpm-bundle ...

  2. 植物大战僵尸中文第二版和年度版 游戏分析及delphi源码

    00413184 |. E8 77E30100   |CALL PlantsVs.00431500                  ; 地上的物品00413189 |. 8D7424 10     ...

  3. TLV格式是什么格式

    TLV 格式是什么格式 一种可变格式, TLV 的意思就是: Type 类型, Lenght 长度, Value 值: Type 和 Length 的长度固定,一般那是 2 . 4 个字节: Valu ...

  4. C#不同页面之间通信的方法

    以前做项目的时候经常头疼两个页面之间的交互(汗),这几天看的MVVM项目,忽然感觉好简单的!我自己写了个简单的demo 可以简单实现2个页面之间的交互,新人第一次发博客,不喜勿喷 代码很简单,注释我就 ...

  5. ASP.NET MVC NonActionAttribute使用说明

    默认情况下,MVC 框架将 controller 类的所有公共方法都视为操作方法. 如果您的 controller 类包含公共方法,并且您不希望它成为操作方法,则必须用 NonActionAttrib ...

  6. 分类图 Class Diagram

    类图(Class Diagram)是描述类.接口.协作以及它们之间关系的图. 类图是系统中静态视图的一部分,静态视图可以包括许多的类图. 静态视图用于为软件系统进行结构建模,它构造系统的词汇和关系,而 ...

  7. 爬虫组NABC

    Need(需求): 我们小组的研究课题是编写一个更实用的爬虫软件,编写时会应用到学长的部分代码并在其基础上完善创新. 鉴于学长代码已经实现了基本功能,即从网站上面爬取相关的Word文档等与计算机有关的 ...

  8. 典型的js页面

    var myurl; var mydata; var postype = "POST"; var getype = "GET"; var jsontype = ...

  9. js图片旋转

    <script type="text/javascript" language="javascript"> function rotate(id, ...

  10. [resource]23个python的机器学习包

    23个python的机器学习包,从常见的scikit-learn, pylearn2,经典的matlab替代orange, 到最新最酷的Theano(深度学习)和torch 7 (well,其实lua ...