React使用rAF动画介绍
一、
<!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动画介绍的更多相关文章
- android动画介绍之 自己定义Animation动画实现qq抖一抖效果
昨天我们介绍了Animation的基本使用方法.小伙伴们了解的怎么样了?假设还没有了解过Animation的小伙伴能够看看这篇博客 android动画介绍--Animation 实现loading动画 ...
- android动画介绍之 自定义Animation动画实现qq抖一抖效果
昨天我们介绍了Animation的基本用法.小伙伴们了解的怎么样了?如果还没有了解过Animation的小伙伴可以看看这篇博客 android动画介绍--Animation 实现loading动画效果 ...
- android动画介绍--Animation 实现loading动画效果
Animation的使用方法并不难.这里简单的介绍一下使用方法. 先看效果图: 效果还是不错的吧. 下面来看看使用方法. 动画效果是通过Animation来实现的,一共有四种,分别为: AlphaAn ...
- <react> 组件的详细介绍：
<react> 组件的详细介绍: 思维导图: 代码介绍: TodoList:(组件) import React, { Component } from 'react' import Sty ...
- React Transition css动画案例解析
实现React Transition Css动画效果 首先在项目工程中引入react-transition-group: npm install react-transition-group --sa ...
- React用JS 模拟动画介绍
一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...
- React Native之 ScrollView介绍和使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native 之 Touchable 介绍与使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native之FlexBox介绍和使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
随机推荐
- 转：const“变量”、define的常量和static 变量
首先讲C编译器的内存分配: 代码区 数据区 用户区=线程栈+堆 其中的数据区存储:常量(define)+静态变量(static)+符号集(const)+全局变量 然后讲一下编译的大致顺序: 注释- ...
- .NET书籍推荐
任何语言的学习,要快速掌握,不在看书,而在实践.——题记 .NET技术从1.1发展到2.0,内核基本完善,从.NET 2.0开始学习是个明智的选择.而NET 3.5以及即将推出的.NET 4.0所新加 ...
- javascript 柯里化
先看一下代码 function add(){ var sum=0; for(var i=0;i<arguments.length;i++){ sum+=arguments[i]; } retur ...
- IE下同样的$.ajax()被调用两次，只能执行一次（第一次）
今天发现了这个问题,仅限于IE下所有浏览器包括Edge 百度了一下原来问题就在这句话:如果第二次请求与第一次请求完全相同,会直接从缓存获取. 那么就在请求时让URL变得不一样吧 $.ajax({ ty ...
- float类型进行计算精度丢失的问题
今天一个案子,用户反映数量差异明明是 2.0-1.8,显示的结果却为0.20000005,就自己写了段方法测试了一下:package test1;public class Test2 {/*** @p ...
- 修改info
新增Key: NSLocationAlwaysUsageDescription 和 NSLocationWhenInUseUsageDescription ,这两个Key的值将分别用于描述应用程序 ...
- cocos2dx中的定时器及其分类
cocos2dx中的定时器分三大类: 1.帧循环定时器 2.一次性定时器 3.自定义定时器 一.帧循环定时器,顾名思义,每一帧都会执行一次,用于实时性要求比较高的场合,如碰撞检测 void sched ...
- JPA学习---第七节：使用JPA加载_更新_删除对象
1.添加数据,代码如下: @Test public void save(){ EntityManagerFactory factory = Persistence.createEntityManage ...
- js之正则表达式（下）
1.分组之exec返回数组 1>非分组匹配的exec返回数组: var pattern =/\d+[a-z]+/; var str='234google'; alert(pattern.exec ...
- c语言编程之队列(链表实现)
用链表实现了队列,完成了队列的入队和出队功能. #include"stdio.h" typedef int element; typedef struct Node{ struct ...