React.js终探（六）
在React中，我们怎么样使用它跟CSS 3 动画结合在一起使用呢？
CSS3 Transitoin
CSS3动画要求DOM属性变化的时候才能够被触发。所以这就需要我们把属性变化后的React元素渲染到真实的DOM中，这样才能够有过渡效果，形成动画。
那我们来实现一种：第一次渲染后，当渲染完成时，调用setState()，且重新设置样式，接着便触发第二次渲染，中间便有过渡效果。
注意：使用window.getComputedStyle()，调用它，会刷新DOM的样式，确保的是之前设置的样式已经渲染到DOM中。
如下例子：
我们实现由图1到图2的过渡动画，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画 : CSS3 Transition</title>
<script src="lib/react.min.js"></script>
<script src="lib/JSXTransformer.js"></script>
<!--组件样式-->
<style>
.ez-gauge{
position:relative;
display:inline-block;
}
.ez-gauge .pointer{
position : absolute;
left : 149px;
top : 104px;
transform-origin : 1px 45px;
transition : transform 2s;
}
</style>
</head>
<body>
<div id="content"></div>
<script type = "text/jsx">
//组件定义
var EzGaugeComp = React.createClass({
//声明初始状态
getInitialState : function(){
return {
value : 0, //速度值
mounted : false //是否已挂接到DOM
};
},
//首次渲染后改变状态
componentDidMount : function(){
this.setState({mounted : true});
},
//校验属性值，无效时不刷新界面
shouldComponentUpdate : function(nextProps,nextState){
if(nextProps.value > 220 || nextProps.value<0) return false;
return true;
},
render : function(){
//速度为0时的旋转角度
var degree = -201;
//根据属性值计算旋转角度
if(this.state.mounted){
degree = (this.props.value / 220) * 265 - 201;
//确保之前设置的样式生效
window.getComputedStyle(React.findDOMNode(this.refs.ptr)).transform;
}
//表针样式
var style={
transform : "rotate("+degree+"deg)"
};
return (
<div className="ez-gauge">
<img src="img/gauge.jpg" />
<img src="img/gauge-pointer.jpg" className="pointer" style={style} ref="ptr"/>
</div>
);
}
});
//渲染
React.render(
<EzGaugeComp value="200"/>,
document.querySelector("#content"));
</script>
</body>
</html>
再提一次，window.getComputedStyle()是更新样式
默认属性
比如我们的React组件渲染了很多个，而如果我们为每一个都要设置value:0的属性，那么需要重复去声明，太麻烦了。
那React也为我们提供了组件的默认属性。
在声明组件的时候，用getDefaultProps()方法声明：（类比getInitialState吧）
var EzDemoComp = React.createClass({
//设置默认属性值
getDefaultProps:function(){
return {
value : 0
}
},
render: function(){
//使用this.props.value访问属性，如果用户没有设置，则该值为默认值
return <div classname="ez-demo">{this.props.value}</div>;
}
});
//创建React元素时没有指定属性值
React.render(<ezdemocomp></ezdemocomp>,
document.querySelector("#content"));
当然，如果我们在render中的<ezdemocomp>中声明了value，则会覆盖默认属性，如<ezdemocomp value="1"></ezdemocomp>
React.js终探（六）的更多相关文章
- React.js终探（七）(完)
我们在前面介绍了组件的各种特性,这一节我们来说说多组件的情况. 在实际开发中,我们的组件难免会遇到有公共部分的情况,如果是个别情况还好,但如果数量比较多的话,那这时候,就需要公用了. 怎么公用呢? R ...
- React.js终探（五）
在React中,一切都是看做组件. 而组件的嵌套也是十分常见的. 所以有的组件就作为容器组件 容器组件 React元素可以包含子元素 如 //JSX <ezpanel title="t ...
- React.js再探（四）
不知道看官们还记不记得上一节的内容,关于生命周期的.我们来个例子重温且练习一下. 传送门:http://www.cnblogs.com/galenyip/p/4574400.html 我们来实现一下时 ...
- React.js再探（二）
上文中说到了组件了. 我们使用组件的目的最大莫过于复用,提供生产效率. 那么,这时候组件就应该能够提供一些”api”出来,让开发者去定义在不同场景下的不同表现,比如,行为或外观等. 而这些“api”就 ...
- React.js再探（三）
很多时候,组件实例的外观和行为我们通过props进行定制就可以了.因为任何时候,组件实例的表现只跟 传过来的props属性 相关. 我们称这种为 无状态/ stateless 组件 即它自身是 无记忆 ...
- react.js 从零开始（六）Reconciliation
Reconciliation React 的关键设计目标是使 API 看起来就像每一次有数据更新的时候,整个应用重新渲染了一样.这就极大地简化了应用的编写,但是同时使 React 易于驾驭,也是一 ...
- React.js 小书 Lesson27 - 实战分析：评论功能（六）
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson27 转载请注明出处,保留原文链接和作者信息. (本文未审核) 删除评论 现在发布评论,评论不 ...
- React.js深入学习详细解析
今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
随机推荐
- 透过浏览器看HTTP缓存（转）
作为前端开发人员,对于我们的站点或应用的缓存机制我们能做的似乎不多,但这些却是与我们关注的性能息息相关的部分,站点没有做任何缓存机制,我们的页面可能会因为资源的下载和渲染变得很慢,但大家都知道去找前端 ...
- socket计划编制的原则
socket编程原理 1.问题的引入 1) 普通的I/O操作过程: UNIX系统的I/O命令集,是从Maltics和早期系统中的命令演变出来的,其模式为打开一读/写一关闭(open-write-rea ...
- some notions about os
1. Multiprogramming system provide an environment in which the various resources (like CPU,memory,an ...
- 矢量编程——随着MNIST案例
矢量编程使用的所有明确的矢量运算,而不是for周期. 上一节所用的是512*512*10的数据集非常小.我们取的patch非常小(8*8),学来的特征非常少(25).而我又凝视掉了梯度校验(偷懒),所 ...
- Android - 数据存储 －存储键值对
如果你有少量的键值数据需要存储,可以使用SharedPreferencesAPI.SharedPreferences对象指向一个包含键值对的文件并且提供了一些简单的方法来读取它们.每个SharedPr ...
- poj 1061 扩展欧几里德同余方程求解
摘要写在一瞪眼. #include<iostream> using namespace std; long long exgcd(long long a,long long b,long ...
- ICT工作的思考<两>
2周奋战.我负责的LB昨天完成了最后一个模块.最后20日. 一周早于预期,经理说,出乎他的意料.So 奖励表,昨日,管理人员与我们合作,吃烧烤补补身子.我只想说,最后一个喘息. 这两周的生活确挺忙碌的 ...
- fastjson初始化对性能的影响(转)
之前在项目中序列化是用thrift,性能一般,而且需要用编译器生成新的类,在序列化和反序列化的时候感觉很繁琐,因此想转到json阵营.对比了jackson,gson等框架之后,决定用fastjson, ...
- 定向爬虫之爬一爬各个学校新闻的认识（【1】对Url的认识）
昨天早上,我习惯性的打开博客园,看一看别人的写的博客.突然想起,自己好像没有写过什么博客,所以就心血来潮,把我现在做得事情写出来, 这也是对我目前的学习的一种总结.望大神指点.... 对于一间学校的新 ...
- Design Pattern Command 命令设计模式
这种设计模式是使用不同类的包裹不同的命令,达到什么样的命令执行什么操作. 有可能进一步利用map您最喜欢的对接命令字. 正在运行的类实际上已经包含了操作的所有需求,例如: class SuperMak ...