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 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
随机推荐
- mercurial(hg)使用
# 版本管理软件的比较 svn 每个目录下建一个.svn目录实在是不爽. git 分支管理非常方便,但没感觉有什么用,主要还是在修改前提交一次代码, 等后悔时再回来,没什么其他的目的.关键是中文乱码问 ...
- 提高Linux安全性--hosts.allow, hosts.deny 文件修改方法
有一种办法来提高Linux安全性--修改 hosts.allow , hosts.deny 这2个文件来配置 允许某个ip访问, 或者禁止访问. 可以通过这种方式设置限制 sshd 的远程访问, 只允 ...
- 如何计算IP地址及CIDR（收藏）
如何计算IP地址及CIDR 一. IP地址概念 IP地址是一个32位的二进制数,它由网络ID和主机ID两部份组成,用来在网络中唯一的标识的一台计算机.网络ID用来标识计算机所处的网段:主 机ID用来标 ...
- JMS消息头
一个消息对象分为三部分:消息头(Headers),属性(Properties)和消息体(Payload).对于StreamMessage和MapMessage,消息本身就有特定的结构,而对于TextM ...
- Java从入门到精通——数据库篇之JAVA中的对Oracle数据库操作
在Java中对Oracle数据库的操作分为两种:一.查询.二.非查询. 下面是我对其进行总结: 一.查询数据 /** * 根据用户代码查询 * @param userId * @return 如果存在 ...
- synchronized关键字使用剖析
synchronized关键字,代表这个方法加锁,相当于不管哪一个线程(例如线程A),运行到这个方法时,都要检查有没有其它线程B(或者C. D等)正在用这个方法,有的话要等正在使用synchroniz ...
- Mininet VM设置笔记
Mininet VM是为了加快Mininet安装,而且可以很容易在linux平台上运行. VM运行在Windows,Mac,Linux,通过VMware.VirtualBox,QEMU和KVM. 下载 ...
- H5不能少的功能-滑动分页
// 滑动分页 $(window).scroll(function() { var mayLoadContent = $(window).scrollTop() & ...
- docker 感性体验
Docker 1.0正式发布!1.0 版本包含很多新特性,这也是 Docker 的首个产品级的版本.从今天开始,你将会一直听到一个新的概念 —— Docker as a platform ,其组件包括 ...
- Linux内核分析作业一
一.实验 通过反汇编一个简单的c语言程序来分析计算机是如何工作的 1.进入实验楼,在实验楼环境下把c语言代码转换成汇编码 汇编代码如下图: 二.汇编代码的工作过程中堆栈的变化:(手绘步骤,顺序是从左到 ...