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_ ...
随机推荐
- TextView文字排版问题：
本文转载自:http://blog.sina.com.cn/s/blog_821e2bb101011803.html textview自动换行导致混乱的原因----半角字符与全角字符混乱所致!一般情况 ...
- for xml path以及sql合并查询
sql中for xml path的用法. http://www.cnblogs.com/yanghaibo/archive/2010/06/04/1751405.html
- SQL Server 2012 BI 学习 第一天
了解数据源,数据源视图,多维数据集,维度 数据源:一个数据库或者其它数据链接,SSAS不支持使用模拟功能来处理 OLAP 对象.模拟信息选择“使用服务帐户” 数据源视图:DSV是元数据的单个统一视图, ...
- Ztack学习笔记(2)-系统初始化分析
main函数先执行初始化工作,包括硬件.网络层.任务等的初始化. 一 系统初始化 系统初始化函数主要完成内存分配.消息队列头.定时器.电源管理.任务系统及内存栈等的初始化,具体如下代码所示: //os ...
- 终于成为博客员的一员了，这是我的第一篇博文，写一个关于ul li内容宽度的问题和解决方案
第一次写博文,写一个刚才遇到的问题吧. 关于ul li文字长度不固定,一行显示多列.当指定宽度时,文字长度超过指定的li宽度时解决方案: 如下代码 <h4>发送对象(共10个会员)< ...
- js 前加分号和感叹号是什么意思？
;!function(){}(); ;!有什么用? 从语法上来开,Javascript中分号表示语句结束,在开头加上,可能是为了压缩的时候和别的方法分割一下,表示一个新的语句开始.所以,如果在一个单 ...
- Java异常的深入研究与分析
前言 本文是异常内容的集大成者,力求全面,深入的异常知识研究与分析.本文由金丝燕网独家撰写,参考众多网上资源,经过内容辨别取舍,文字格式校验等步骤编辑而成,以飨读者.对于本文的内容,建议小白需要多多思 ...
- 标签跳转break和continue
标签是后面跟有冒号的标识符,例如 label1: 在java中,标签起作用的唯一的地方刚好是在迭代语句之前. “刚好之前”的意思表明,在标签和迭代之间置入热和语句都不好. 而在迭代之前设置标签的唯一 ...
- WPF中使用ValueConverter来实现“范围条件触发器”
在WPF中,我们知道界面层可以通过Trigger触发器实现“条件”——“赋值”的功能 属性触发器Property Trigger:当Dependency Property的值发生改变时触发.数据触发器 ...
- try-catch-finally中return的执行情况分析
try-catch-finally中return的执行情况分析: 1.在try中没有异常的情况下try.catch.finally的执行顺序 try --- finally 2.如果try中有异常,执 ...