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_ ...
随机推荐
- sql中的系统表sysobjects以及如何查看sql语句的执行时间
使用sysobjects可以快速查看数据库中表.视图.存储过程.触发器.约束等的信息. 大牛文章:http://www.cnblogs.com/atree/p/SQL-Server-sysobject ...
- Oracle内存组件理论篇一
目标 1.SGA结构 2.PGA结构 1.SGA Shared pool 1).共享池是对SQL.PL/SQL程序进行语法分析.编译.执行的内存区域. 在执行SELECT * FROM emp语句时, ...
- Linq--扩展方法
如果现在有一个这样的需求,求筛选出来的大于20MB的进程的和,常用的方法是写一个静态方法传进去一个ProcessData列表 比如: public static Int64 TotalMemory( ...
- WPF 一个弧形手势提示动画
这是一个操作提示动画,一个小手在屏幕上按照一个弧形来回运动 <Window x:Class="LZRichMediaWall.MainWindow" xmlns=" ...
- Java从入门到精通——数据库篇之JAVA中的对Oracle数据库操作
在Java中对Oracle数据库的操作分为两种:一.查询.二.非查询. 下面是我对其进行总结: 一.查询数据 /** * 根据用户代码查询 * @param userId * @return 如果存在 ...
- Python之str(),repr(),``
对于对象obj: str()生成的字串是给人看的 repr()生成的字串是给解析器看的 ``与repr()等义. 最直接就是: ------------------- obj=eval(repr(ob ...
- 【Jetlang】一个高性能的Java线程库
actor Jetlang 提供了一个高性能的Java线程库,该库是 JDK 1.5 中的 java.util.concurrent 包的补充,可用于基于并发消息机制的应用. .net的MS CCR ...
- ASP.NET MVC 技术债务
ASP.NET MVC 缓存.本地化和监控诊断 ASP.NET MVC 认证与授权 Entity Framework 创建数据模型
- 常见前端面试题之HTML/CSS部分
转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...
- SQL Server 数据库最小宕机迁移方案
一.目的 在做SQL Server数据库维护的时候,当上司要求我们把几十G的数据文件搬动到其它服务器,并且要求最小宕机时间的时候,我们有没什么方案可以做到这些要求呢? 在这里我们假设这两台机器并不是在 ...