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_ ...
随机推荐
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- 关于iOS6应用中第三方类库不支持armv7s的问题解决
今天编译ios6+cocos2d v2 .1 beta2制作的游戏,出现下面的错误: ld: file is universal (3 slices) but does not contain a(n ...
- C# new的用法
在 C# 中,new 关键字可用作运算符.修饰符或约束. 1)new 运算符:用于创建对象和调用构造函数.这种大家都比较熟悉,没什么好说的了. 2)new 修饰符:在用作修饰符时,new 关键字可以显 ...
- Python脚本控制的WebDriver 常用操作 <二十> 处理表单元素
测试用例场景 表单对象的操作比较简单,只需要记住下面几点 使用send_keys方法往多行文本框和单行文本框赋值: 使用click方法选择checkbox 使用click方法选择radio 使用cli ...
- ActiveMQ之TemporaryQueue和TemporaryTopic
TemporaryQueue和TemporaryTopic,从字面上就可以看出它们是“临时”的目的地.可以通过Session来创建,例如: TemporaryQueue replyQueue = se ...
- ORACLE 11G R2 修改"用户名"
SQL> create pfile from spfile; 修改pfile文件,添加隐含参数 *._enable_rename_user='TRUE',将数据库以restrict方式启动 1. ...
- iOS的SandBox的结构研究
在模拟器中运行iOS程序,都会为该程序创建一个沙盒(SandBox).首先声明,我用的系统是Max OS X 10.7.3,编译器是Xcode 4.3.2.想要找到沙盒目录,先运行Finder,然后在 ...
- ios自定义选择器ActionSheetPicker改进版
ios自带的UIDataPicker和UIDatePicker最大的毛病就是没有带确定和取消这两个按钮,而ActionSheetPicker是以上两个选择器的开源封装.但是这个东东也有些小问题,就是没 ...
- 静态wenb开发，动态web开发
- Excel取消保护密码
Excel表被保护了, 如果没有密码, 可通过以下宏代码查看 (Office 2013已测) Option Explicit Public Sub AllInternalPasswords()' Br ...