一、

 <!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) {

                     requestAnimationFrame(this.resolveSetTimeout);

                 }

             },

             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}></Positioner>, document.body);

     </script>

 </body>

 </html>

React使用rAF动画介绍的更多相关文章

  1. android动画介绍之 自己定义Animation动画实现qq抖一抖效果

    昨天我们介绍了Animation的基本使用方法.小伙伴们了解的怎么样了?假设还没有了解过Animation的小伙伴能够看看这篇博客 android动画介绍--Animation 实现loading动画 ...

  2. android动画介绍之 自定义Animation动画实现qq抖一抖效果

    昨天我们介绍了Animation的基本用法.小伙伴们了解的怎么样了?如果还没有了解过Animation的小伙伴可以看看这篇博客 android动画介绍--Animation 实现loading动画效果 ...

  3. android动画介绍--Animation 实现loading动画效果

    Animation的使用方法并不难.这里简单的介绍一下使用方法. 先看效果图: 效果还是不错的吧. 下面来看看使用方法. 动画效果是通过Animation来实现的,一共有四种,分别为: AlphaAn ...

  4. <react> 组件的详细介绍：

    <react> 组件的详细介绍: 思维导图: 代码介绍: TodoList:(组件) import React, { Component } from 'react' import Sty ...

  5. React Transition css动画案例解析

    实现React Transition Css动画效果 首先在项目工程中引入react-transition-group: npm install react-transition-group --sa ...

  6. React用JS 模拟动画介绍

    一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...

  7. React Native之 ScrollView介绍和使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  8. React Native 之 Touchable 介绍与使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  9. React Native之FlexBox介绍和使用

    # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...

随机推荐

  1. 2013-07-26 IT 要闻速记快想

    ### ========================= ###传Google正在内测供用户买卖技能的电商平台Helpout,最早于下月上线该服务将依托Google强大的云服务和搜索能力,以实时视频 ...

  2. SOAP 介绍

    简介 SOAP(Simple Object Access Protoco)简单对象访问协议是在分散或分布式的环境中交换信息的简单的协议,是一个基于 XML 的协议.此协议规范由 IBM.Microso ...

  3. IE下同样的$.ajax()被调用两次，只能执行一次（第一次）

    今天发现了这个问题,仅限于IE下所有浏览器包括Edge 百度了一下原来问题就在这句话:如果第二次请求与第一次请求完全相同,会直接从缓存获取. 那么就在请求时让URL变得不一样吧 $.ajax({ ty ...

  4. 使用PowerShell 连接Azure

    除了使用门户登入外,还可以使用PowerShell的方式来连接Azure.首先要去下载组件 http://azure.microsoft.com/en-us/downloads/?rnd=1 http ...

  5. Power Map

    推荐64位版本Office,但会遇到以下问题 建议大多数用户使用 32 位 Office 我们建议使用 32 版本的 Office,因为它与大多数其他应用程序更加兼容,尤其是第三方加载项.这也是默认安 ...

  6. ESB概述

    ESB概念的提出: 企业有大量的异构的业务系统,这些系统之间需要通过web service来交互数据,这样的话可以想象系统直接的交互关系是蜘蛛网状的,是难以维护的.这时候提出了ESB,每个业务系统只需 ...

  7. Exception in thread "main" java.lang.OutOfMemoryError: Java heap space

    Exception in thread "main" java.lang.OutOfMemoryError: Java heap space解决方法 问题描述 Exception ...

  8. [System.Net]模拟Web请求编写简易单词查询客户端

    demo: 我就不上传了 前言 在实际生活中,网络请求的应用极其常见,比如使用浏览器,程序中我们还要调用webservice.那么浏览器是怎么请求网络资源的呢?不用它可以自己请求不? 答案是可以的. ...

  9. Win8 硬盘100%几个修复方法

    上连接 1.改注册表:http://jingyan.baidu.com/article/e3c78d647f79be3c4c85f5d0.html 2.待续

  10. UML 小结（5）- 图解 Rational Rose 的详细安装过程

    在学习UML的时候,会用到画图工具:Rotional Rose . 原以为这款软件直接下载下来或者跟朋友那边拷过来就可以直接用了,结果却是没有那么简单,如果读者您也是为了解决这个家伙的安装问题的话,那 ...