React用JS 模拟动画介绍
一、
<!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) {
setTimeout(this.resolveSetTimeout, this.props.timeoutMs);
}
},
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} timeoutMs={10}></Positioner>, document.body);
</script>
</body> </html>
二、结果
React用JS 模拟动画介绍的更多相关文章
- Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...
- React+Node.js+Express+mongoskin+MongoDB
首发:个人博客,更新&纠错&回复 采用React + Node.js + Express + mongoskin + MongoDB技术开发的一个示例,演示地址在这里,项目源码在这里. ...
- vue.js之动画篇
本文引入类库的方式均采用CND的方式,可直接复制代码到编辑器中学习和测试 不使用动画切换元素 <div id="app"> <input type="b ...
- React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...
- FormData js对象的介绍和使用
FormData js对象的介绍和使用 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用FormData对象可以减 ...
- 使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
- three.js模拟实现太阳系行星体系
概况如下: 1.SphereGeometry实现自转的太阳: 2.RingGeometry实现太阳系星系的公转轨道: 3.ImageUtils加载球体和各行星贴图: 4.canvas中createRa ...
- Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
- JsPlumb在react的使用方法及介绍
JsPlumb在react的使用方法及介绍 一．相关资料来源: 1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_ ...
随机推荐
- PHP+AJAX无刷新返回天气预报
AjaxJavaScript天气预报php天气预报,用php来写一个天气预报的模块. 天气数据是通过采集中国气象网站的.本来中国天气网站也给出了数据的API接口.以下是API的地址.返回的数据格式为j ...
- 启动另外一个activity，并返回结果
欢迎大家光临我的小店:http://clkk.taobao.com 大致步骤: 1.启动另外一个Activity,这里称子Activity: 2.子Activity通过setResult方法设置返回结 ...
- python杂记-5(装饰器)
1.被装饰的函数有参数(一个参数): def w1(func): def inner(arg): # 验证1 # 验证2 # 验证3 return func(arg) return inner @w1 ...
- python学习2——数据类型
1. python是强类型 动态类型的语言,动态类型表明它可以在声明变量的时候,不必指定数据类型,强类型规定了它不能容忍隐式类型转换 2. python中的不可变类型有:int,string,tupl ...
- 多实例MySQL批量添加用户和密码并授权
OS:Cent OS 6.3 DB:5.5.14 如果一台服务器上有100个MySQL数据库实例,此时需要给不同端口的几个数据库添加用户名.密码并授权应用IP,一个个授权没问题,反正累的不是我,哇咔咔 ...
- 【Node.app】Node.js for iOS
Node.app 是用于 iOS 开发的 Node.js 解释器,它允许最大的代码重用和快速创新,占用资源很少,为您的移动应用程序提供 Node.js 兼容的 JavaScript API.你的客户甚 ...
- MVC的小知识点
1.MVC的前台页面编译完之后,也会生成一个前台页面类.在前天页面中加入这段代码this.GetType().Assembly.GetLocation()得到当前类所在的程序集,可以查看其所在的程序, ...
- Spring4新特性简述
Spring是一个java世界中极其流行 的开源框架.Spring的初衷是降低企业级开发的复杂性,并试图通过POJO对象实现之前EJB这类重型框架才能实现的功能.Spring不仅仅对服务 端开发有用, ...
- div+css登陆界面案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JPA学习---第一节：JPA详解
一.详解 JPA JPA(Java Persistence API)是Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关系映射工具来管理Java应用中的关系数据.他的出现主要是 ...