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的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
随机推荐
- oracle 12c 三学习 pdb 可插拔测试
DECLARE l_result BOOLEAN; BEGIN l_result := DBMS_PDB.check_plug_compatibility( pdb_descr_file => ...
- Agile/CMMI/Scrum
Agile/CMMI/Scrum 一.背景介绍 在朋友(aehyok)的建议下,初步去了解Visual Studio Online,简称VS Online(即原来的 Team Foundation S ...
- OpenCV面、人眼检测
/* 功能:实现对眼睛.脸部的跟踪. 版本号:1.0 时间:2014-4-27 */ #include <opencv2/objdetect/objdetect.hpp> #include ...
- LightOJ1010---Knights in Chessboard (规律题)
Given an m x n chessboard where you want to place chess knights. You have to find the number of maxi ...
- sizeof运营商
sizeof它是C语言的关键字,它计算对象所占用的字节数.采用sizeof通过计算对象的大小,占用的对象是一个良好的编程习惯二手. ★你得到的内置型尺寸 一些内置类型的大小会随着体系结构的不同而不同, ...
- 详谈socket请求Web服务器过程（转）
最开始我们需要明白一件事情,因为这是这篇文章的前提: HTTP协议只是一个应用层协议,它底层是通过TCP进行传输数据的.因此,浏览器访问Web服务器的过程必须先有“连接建立”的发生. 而有人或许会问: ...
- grep之字符串搜索算法Boyer-Moore由浅入深（比KMP快3-5倍）（转）
这篇长文历时近两天终于完成了,前两天帮网站翻译一篇文章“为什么GNU grep如此之快?”,里面提及到grep速度快的一个重要原因是使用了Boyer-Moore算法作为字符串搜索算法,兴趣之下就想了解 ...
- 聪明的kk
聪明的kk 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描写叙述 聪明的"KK" 非洲某国展馆的设计灵感源于富有传奇色彩的沙漠中陡然起伏的沙丘.体现出本 ...
- iostream与iostream.h乱弹琴
#include <iostream.h> 非标准输出流 #include <iostream> 标准输出流 见短eclipse关于使用android ndk时的简单代码 ...
- SQL Server 连接问题－命名管道
原文:SQL Server 连接问题-命名管道 出自:http://blogs.msdn.com/b/apgcdsd/archive/2011/01/12/sql-server-1.aspx 一.前言 ...