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 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
随机推荐
- linux查看硬件信息的命令(图文)
发布:脚本学堂/Linux命令 编辑:JB02 2013-12-23 21:48:18 [大 中 小] 转自:http://www.jbxue.com/LINUXjishu/14996.htm ...
- hibernate数据库配置
在文件夹etc中 ## MySQL #hibernate.dialect org.hibernate.dialect.MySQLDialect #hibernate.dialect org.hiber ...
- Microsoft AzureStorageAccount for Powershell
使用Powershell 创建的存储账户,注意StorageAccountName只能使用小写字母以及数字, -Location参考http://www.cnblogs.com/SignalTips/ ...
- mac安装cocoapods
sudo gem install cocoapods
- WebAPi（selfhost）
ASP.NET WebAPi(selfhost)之文件同步或异步上传 前言 前面我们讲过利用AngularJs上传到WebAPi中进行处理,同时我们在MVC系列中讲过文件上传,本文结合MVC+We ...
- Aspose 数字和日期 设置
Microsoft Excel一个非常强大的功能就是使客户可以设置数字和日期的显示格式,众所周知数字可以显示为不同的值格式,包含:小数.货币.百分数.分数.账面价值等,同样地Aspose.Cells也 ...
- Palindrome Partitioning
Palindrome Partitioning Given a string s, partition s such that every substring of the partition is ...
- .net datatable 添加一列
dt.Columns.Add("image", Type.GetType("System.String")); foreach (DataRow dr in d ...
- 三大主流开源硬件对比：Arduino vs BeagleBone vs Raspberry Pi
个人总结: Arduino就是个AVR单片机,个人觉得更适合玩电子的,社区也很活跃. BeagleBone是ARM Cortex-A8,属于嵌入式,价格高于Pi,但是许多方面拥有超越 Pi 的优 势, ...
- beego 0.9.0 中智能路由AutoRouter的使用方法及源码解读
了解beego的开发者肯定知道,beego的路由设计来源于sinatra,原来是不支持自动路由的,每一个路由都要自己配置的,如: type MainController struct { beego. ...