React 周期性改变字体透明度

    xiaoxiao2021-03-25  118

    这次的例子是一个透明度往复变淡的字符串 上代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/babel-core/browser.js"></script> </head> <body> <div id="container"></div> <script type="text/babel"> var Hello = React.createClass({ getInitialState: function () { return { opacity: 1.0 }; }, componentDidMount: function () { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); }, render: function () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> ); } }); ReactDOM.render( <Hello name="world"/>, document.body ); </script> </body> </html>

    这个执行过程是先是getInitialState初始化状态,然后这算是进入状态后执行componentDidMount,他里面有一个setInterval能够周期性执行函数完成对透明度属性的改变 讲完了再见

    转载请注明原文地址: https://ju.6miu.com/read-21020.html

    最新回复(0)