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 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
随机推荐
- [大牛翻译系列]Hadoop（8）MapReduce 性能调优：性能测量（Measuring）
6.1 测量MapReduce和环境的性能指标 性能调优的基础系统的性能指标和实验数据.依据这些指标和数据,才能找到系统的性能瓶颈.性能指标和实验数据要通过一系列的工具和过程才能得到. 这部分里,将介 ...
- ASP.NET中各种连接数据库的配置
一.数据库连接语句 1.MSSQL数据库链接示例 <connectionStrings> <add name="Conn" connectionString=&q ...
- XAML 概述一
XAML的全称是Extensible Application Markup Language,就是我们所说的可扩展应用程序标记语言.XAML可以应用到许多不同领域,但主要用于构建用户界面. XAML是 ...
- ios应用启动后的自动版本检测方式
今天意外的发现了appstore居然还提供通过url获取json格式的客户端信息链接: http://itunes.apple.com/lookup?id=$id 通过此地址可以获取应用的icon.介 ...
- iOS应用的真机调试
必须条件:99美元的帐号,没有这个就不用再往下看了. 首先,登录到http://developer.apple.com/devcenter/ios/index.action,如果已经购买了iPhone ...
- 【转】java获取当前路径的几种方法
1.利用System.getProperty()函数获取当前路径: System.out.println(System.getProperty("user.dir"));//use ...
- MongoDB工具MagicMongoDBTool
MagicMongoDBTool工具是一款MongoDB的数据库管理工具,用来进行简单的数据库管理工作. 此工具为国人开发,项目地址:MagicMongoDBTool,目前作者已经完成基本功能开发. ...
- Struts2结合sitemesh3制作网站母版页面
上一篇文章介绍了sitemesh3的使用,这篇文章来介绍如何结合struts2来配置和使用sitemesh,具体的如何使用sitemesh3我就不讲解了,这个你们可以看看我的上一篇博客. 首先你要添加 ...
- C# testJsonAsXMLNodeAttribute - XML& json & Collections - XmlNode, XmlElement, XmlAttribute,Dictionary,List
testJsonAsXMLNodeAttribute using Newtonsoft.Json; using System; using System.Collections.Generic; us ...
- WinForm点击按钮在对应的panel里画图
panel在form1里,button在form1上方,panel在下面. 主要是在button1的click时间获取panel的画笔. 下面的不行,在panel里获取画笔,然后传到button1,根 ...