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 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
随机推荐
- JS预览图像将本地图片显示到浏览器上的代码
js代码实现: 从file域获取本地图片url并将本地图片显示到浏览器上. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- 有趣的checkbox动画切换状态（支付宝转账成功显示）--第三方开源--AnimCheckBox
这个很有趣的指标通过AnimCheckBox实现,下载地址:https://github.com/lguipeng/AnimCheckBox 代码: activity_main.xml: <Re ...
- uploadify 上传
本来想做一套上传公用的组建的,里面包含文件转码等功能,看来这些都只能后来一步一步加上了,先写下来... 1,引入脚本等 @{ Layout = null; } <!DOCTYPE html> ...
- SQL中的模糊查询
写个标题先.先来一篇大神的文章:http://www.cnblogs.com/GT_Andy/archive/2009/12/25/1921914.html 练习代码如下: 1.百分号:% 表示任 ...
- C# 访问控制：public、private、protected和internal
平日工作时最常用的访问控制符是public和private,当看到prism里面大量使用protected的时候,觉得还是不太理解为啥. 所以就静下心来查找并理解了一下,这里记录下,以便回顾和交流. ...
- 自定义一个WPF的PathButton
一.背景 做项目时总是少不了Button,但是普通的Button大家都不喜欢用,总是想要自定义的Button,正好项目中用到不要边框的Button,并且是形状也是根据功能不同而变化的,并且窗口程序是会 ...
- Object.keys()
Object.keys(obj),返回一个数组,数组里是该obj可被枚举的所有属性名.请看示例: 示例一: function Pasta(grain, width, shape) { this.gra ...
- C/C++ 内联函数
内联函数具备一般函数的性质,但是不需要调用,而是在编译阶段,会用函数体替换函数名被调用的地方.可以节省调用时间(进出栈.保存上下文). 在编译层面和宏的作用相同.内联函数的展开在编译阶段,宏展开在预处 ...
- Linux C 文件与目录1 创建目录
linux C 创建目录 创建目录函数:mkdir 函数原型:int mkdir(char * pathname , mode_t mode); pathname字符指针是表示需要创建的目录路径 ...
- css/js online online code editor/formator/debuger
http://cssdeck.com/labs http://jsfiddle.net/ http://fiddle.jshell.net/ support console http://plnkr ...