一、
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 setTimeout(this.resolveSetTimeout, this.props.timeoutMs); 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} timeoutMs={10}></Positioner>, document.body); 40 </script> 41 </body> 42 43 </html>
二、结果
