一、

 <!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. LiteHttp：一款‘智能’的HTTP框架类库

    LiteHttp:一款‘智能’的HTTP框架类库(转自github) 简介 LiteHttp是一款简单.智能.灵活的HTTP框架库,它在请求和响应层面做到了全自动构建和解析,主要用于Android快速 ...

  2. json string 与object 之间的转化

    1.将json string转化成object 1: public static T GetObjectFromJson<T>(string jsonString) 2: { 3: Dat ...

  3. for xml path以及sql合并查询

    sql中for xml path的用法. http://www.cnblogs.com/yanghaibo/archive/2010/06/04/1751405.html

  4. linux c 打印彩色字符

    #include <stdio.h> #include <string.h> int main(int argc, char **argv) { , j = , str_len ...

  5. boost-内存管理(scoped_array)

    # include <algorithm> string *p=new string[20];    scoped_array<string>  sp(p);    fill_ ...

  6. IIS WMI Provider

    section contains information about the classes that are implemented by the IIS WMI provider in the M ...

  7. 【python】为什么用python

    python胶水语言.脚本语言之王,C/C++可以写python的module,标准库里就有用C/C++写的东西,这个跟java的JNI类似. 性能好,易调试: since 91年

  8. POJ 3321 DFS序+线段树

    单点修改树中某个节点,查询子树的性质.DFS序 子树序列一定在父节点的DFS序列之内,所以可以用线段树维护. 1: /* 2: DFS序 +线段树 3: */ 4:   5: #include < ...

  9. Export Farm Solution wsp Files SharePoint 2007 and 2010

    [System.Reflection.Assembly]::LoadWithPartialName("Microsoft.SharePoint")$farm = [Microsof ...

  10. python学习小结9：面向对象

    面向对象技术 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定义在类中且 ...