React opacity animate组件进行不断闪烁

来源：互联网发布：xboxone 淘宝编辑：程序博客网时间：2024/06/09 20:12

<html>  <head>    <title>Document</title>    <script src="../react.js"></script>    <script src="../react-dom.js"></script>    <!-- //引用资源，JSX转HTML -->    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>  </head>  <body>    <div id="reactContainer"></div>    <script type="text/babel"> //babel JSX => HTML      const Hello = React.createClass({        getInitialState: () => ({opacity: 1.0}),        componentDidMount: function() {          setInterval(function(){            let opacity = this.state.opacity            opacity = opacity < 0 ? 1 : opacity -= .05            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="wlh"/>,        document.getElementById('reactContainer')      )    </script>  </body></html>

阅读全文

0 0