你的位置:首页 > Java教程

[Java教程]React.js终探(六)


在React中,我们怎么样使用它跟CSS 3 动画结合在一起使用呢?

 

CSS3 Transitoin

CSS3动画要求DOM属性变化的时候才能够被触发。所以这就需要我们把属性变化后的React元素渲染到真实的DOM中,这样才能够有过渡效果,形成动画。

 

那我们来实现一种:第一次渲染后,当渲染完成时,调用setState(),且重新设置样式,接着便触发第二次渲染,中间便有过渡效果。

注意:使用window.getComputedStyle(),调用它,会刷新DOM的样式,确保的是之前设置的样式已经渲染到DOM中。

 

如下例子:

 

我们实现由图1到图2的过渡动画,代码如下

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <meta charset="utf-8"> 5   <title>动画 : CSS3 Transition</title> 6   <script src="lib/react.min.js"></script> 7   <script src="lib/JSXTransformer.js"></script> 8   <!--组件样式--> 9   <style>10     .ez-gauge{11       position:relative;12       display:inline-block;13     }14     .ez-gauge .pointer{15       position : absolute;16       left : 149px;17       top : 104px;18       transform-origin : 1px 45px;19       transition : transform 2s;20     }21   </style>22 </head>23 <body>24   <div id="content"></div>25   <script type = "text/jsx">26     //组件定义27     var EzGaugeComp = React.createClass({28       //声明初始状态29       getInitialState : function(){30         return {31           value : 0,       //速度值32           mounted : false  //是否已挂接到DOM33         };34       },35       //首次渲染后改变状态36       componentDidMount : function(){37         this.setState({mounted : true});38       },39       //校验属性值,无效时不刷新界面40       shouldComponentUpdate : function(nextProps,nextState){41         if(nextProps.value > 220 || nextProps.value<0) return false;42         return true;43       },44       render : function(){45         //速度为0时的旋转角度46         var degree = -201;47         //根据属性值计算旋转角度48         if(this.state.mounted){49           degree = (this.props.value / 220) * 265 - 201;50           //确保之前设置的样式生效51           window.getComputedStyle(React.findDOMNode(this.refs.ptr)).transform;52         }53         //表针样式54         var style={55           transform : "rotate("+degree+"deg)"56         };57         return (58           <div className="ez-gauge">59             <img src="img/gauge.jpg" />60             <img src="img/gauge-pointer.jpg" className="pointer" style={style} ref="ptr"/>61           </div>62         );63       }64     });65     //渲染66     React.render(67       <EzGaugeComp value="200"/>,68       document.querySelector("#content"));69   </script>70 </body>71 </html>

 

再提一次,window.getComputedStyle()是更新样式

 

默认属性

比如我们的React组件渲染了很多个,而如果我们为每一个都要设置value:0的属性,那么需要重复去声明,太麻烦了。

那React也为我们提供了组件的默认属性。

在声明组件的时候,用getDefaultProps()方法声明:(类比getInitialState吧)

 1 var EzDemoComp = React.createClass({ 2   //设置默认属性值 3   getDefaultProps:function(){ 4     return { 5       value : 0 6     } 7   }, 8   render: function(){ 9     //使用this.props.value访问属性,如果用户没有设置,则该值为默认值10     return <div classname="ez-demo">{this.props.value}</div>;    11   }12 });13 //创建React元素时没有指定属性值14 React.render(<ezdemocomp></ezdemocomp>,15   document.querySelector("#content"));

 

当然,如果我们在render中的<ezdemocomp>中声明了value,则会覆盖默认属性,如<ezdemocomp value="1"></ezdemocomp>