React使用rAF动画介绍
一、
1 <!DOCTYPE html>
2 <html >
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>- 上一篇 »Vue中CSS动画怎么实现？
- 下一篇 »React，八样式及CSS模块化