一、

 <!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. XML和HTML常用转义字符

    XML和HTML中都有一些特殊的字符,这些字符在XML和HTML中是不能直接使用的,如果必须使用这些字符,应该使用其对应的转义字符. XML常用转义字符: 字符 转义字符 描述 & & ...

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

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

  3. R语言基础(一) 可视化基础

    ##数据获取 x1=round(runif(100,min=80,max=100)) x2=round(rnorm(100,mean=80, sd=7)) x3=round(rnorm(100,mea ...

  4. Express/Koa/Hapi

    Express/Koa/Hapi 本文翻译自: https://www.airpair.com/node.js/posts/nodejs-framework-comparison-express-ko ...

  5. [转载+原创]Emgu CV on C# （七） —— Emgu CV on 轮廓检测

    轮廓检测 对于查找轮廓我们一般要对图像Canny检测.但是对于很特殊的场合其实我们还可以直接对二值化的图像进行轮廓的提取. 关键函数 1. cvFindContours Retrieves conto ...

  6. Madwifi Mad coding：自底向上分析associated_sta的更新过程 —— RSSI和MACADDR等信息获取的底层原理

    Madwifi驱动工作在AP模式下时,可以在/proc/net/madwifi/ath0/associated_sta文件中得到所有接入的用户的MAC地址.实时平均RSSI,和last_rx三个信息. ...

  7. win7安装mysql

    转:http://blog.csdn.net/longyuhome/article/details/7913375 Win7系统安装MySQL5.5.21图解 大家都知道MySQL是一款中.小型关系型 ...

  8. python 函数默认值的小坑啊

    import datetime import time def test(day=datetime.datetime.now()): print day while True: test() time ...

  9. 【BZOJ】【1565】【NOI2009】PVZ 植物大战僵尸

    网络流/最大权闭合子图+拓扑排序 感动死了>_<,一年多以前刚知道网络流的时候听说了这道名字很带感的题目,现在终于有实力切掉它了. 这题是最大权闭合子图模型的经典应用<_<,首 ...

  10. Android串口通信（基于Tiny6410平台）

    友善之臂的Android系统有他们自己编写的一个串口通信程序,网上没有找到他的源代码,而且界面操作不在一个界面,不是很方便,这里我自己写了一个粗糙点的串口通信程序. 同样这里还是调用友善之臂的frie ...