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 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
随机推荐
- LANMP 如何禁止访问 .htaccess 文件
很多朋友问我,为什么他已经在 Apache 规则里面加了禁止别人直接下载 .htaccess 文件,为什么还是可以下载? 其实这个很简单,因为 .htaccess 在 LANMP 环境下,当他作为文件 ...
- c#读写注册表示例分享
c#读写注册表示例,示例中有详细注释. 代码: //写注册表RegistryKey regWrite;//往HKEY_CURRENT_USER主键里的Software子键下写一个名为“Test”的子键 ...
- Spannable相关方法
实现文本链接 其中tv是TextView类型的控件.只需写java代码即可实现链接,无需在xml文件中进行其他的设置. SpannableString spanTxt = new SpannableS ...
- XHTML1.0对HTML4.0的改进
1.XHTML借鉴了XML的写法,语法更加严格: 2.XHTML实现了把页面样式和内容分离了,废弃了HTML4.0中表示样式的标签和属性,推荐使用CSS样式来描述页面的样式. XHTML1.0 分为两 ...
- 自定义一个WPF的PathButton
一.背景 做项目时总是少不了Button,但是普通的Button大家都不喜欢用,总是想要自定义的Button,正好项目中用到不要边框的Button,并且是形状也是根据功能不同而变化的,并且窗口程序是会 ...
- 1100. Mars Numbers (20)
People on Mars count their numbers with base 13: Zero on Earth is called "tret" on Mars. T ...
- phpstorm8 设置及license key
phpstorm8 license key Learn Programming ===== LICENSE BEGIN ===== 63758-12042010 00000Ryqh0NCC73lpRm ...
- AVPlayer的基本使用
2014-5-7 06:46| 发布者: admin| 查看: 437| 评论: 0 摘要: 在iOS开发中,播放视频通常有两种方式,一种是使用MPMoviePlayerController(需要 ...
- c++各种排序
1.插入排序 void InsertSort(int a[], int n) { int temp, i, j; ; i < n; i++) { ]) { temp = a[i]; ; j &g ...
- Halcon学习笔记之缺陷检测（二）
例程:detect_indent_fft.hdev 说明:这个程序展示了如何利用快速傅里叶变换(FFT)对塑料制品的表面进行目标(缺陷)的检测,大致分为三步: 首先,我们用高斯滤波器构造一个合适的滤波 ...