React使用rAF动画介绍

最新推荐文章于 2024-03-21 11:31:49 发布

weixin_30613343

最新推荐文章于 2024-03-21 11:31:49 发布

阅读量207

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shamgod/p/5061272.html

版权

一、

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>React动画</title>
 7 </head>
 8 
 9 <body>
10     <script src="../react-0.13.2/build/react.js"></script>
11     <script src="../react-0.13.2/build/JSXTransformer.js"></script>
12     <script type="text/jsx">
13         var Positioner = React.createClass({
14             getInitialState: function() {
15                 return {
16                     position: 0
17                 };
18             },
19             resolveSetTimeout: function() {
20                 if (this.state.position < this.props.position) {
21                     this.setState({
22                         position: this.state.position + 1
23                     });
24                 }
25             },
26             componentDidUpdate: function() {
27                 if (this.props.position) {
28                     requestAnimationFrame(this.resolveSetTimeout);
29                 }
30             },
31             render: function() {
32                     var divStyle = {
33                         marginLeft: this.state.position
34                     };
35                     return <div style={divStyle}> This will animate! </div> 
36                 } 
37             }) 
38         React.render(<Positioner></Positioner>, document.body);
39         React.render(<Positioner position={100}></Positioner>, document.body);
40     </script>
41 </body>
42 
43 </html>