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_ ...
随机推荐
- Geoserver 相关学习
参考资料: http://geoserver.org/ http://docs.geoserver.org/ 相关文档 http://docs.geoserver.org/stable/en/user ...
- apache 配置虚拟主机
1 打开httpd.conf 找到 # Virtual hosts #Include conf/extra/httpd-vhosts.conf [由于apache的版本不同,可能你ctrl+F ...
- Hive内表和外表的区别
本文以例子的形式介绍一下Hive内表和外表的区别.例子共有4个:不带分区的内表.带分区的内表.不带分区的外表.带分区的外表. 1 不带分区的内表 #创建表 create table innerTabl ...
- Redis 代理服务Twemproxy
1.twemproxy explore 当我们有大量 Redis 或 Memcached 的时候,通常只能通过客户端的一些数据分配算法(比如一致性哈希),来实现集群存储的特性.虽然Redis 2.6版 ...
- 【rest】 深入理解rest
起因是想搞明白 ajax.rest风格和http请求数据会有什么区别 再来回顾一下概念: REST即表述性 状态 传递 满足这些约束条件和原则的应用程序或设计就是RESTful.需要注意的是,REST ...
- JPA学习---第三节：搭建JPA开发环境和全局事务介绍
一.创建 Java 项目 1.导入所需的 jar 包: 2.创建 persistence.xml 文件, 代码如下: <?xml version="1.0" encoding ...
- android studio 完整安装教程，已完全实践过
直接去官方下载包含android sdk的安装包(约813M),之前就是没有包含android sdk (约214M)所以需要另外从dl-google下载android sdk,太麻烦了.下面就一步步 ...
- Django 学习笔记之四 QuerySet常用方法
QuerySet是一个可遍历结构,它本质上是一个给定的模型的对象列表,是有序的. 1.建立模型: 2.数据文件(test.txt) 3.文件数据入库(默认的sqlite3) 入库之前执行 数据库同步命 ...
- 【SharePoint 文档管理解决方案设计系列一】文档使用分析
在我们在 SharePoint 端设计文档管理解决方案之前我们要了解目前客户在他们已有的系统里是怎么对文档进行使用和管理的.只有了解了当前的使用情况才能根据客户的需求量身定做一套适合他们的有效的解决方 ...
- IntelliJ IDEA 比较当前版本文件与历史文件
前言: 写代码修改后怎样比较与历史文件的区别呢?idea提供了2种比较方式(目前笔者所了解到的) 一.SVN的版本比较 二.当前文件与历史版本比较