您的位置：首页 > Web前端 > CSS

第八节，改变元素css,设置定时器

2017-04-26 18:05 183 查看
<!doctype html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<!-- 原本的 react package 被拆分为 react 及 react-dom 两个 package。其中 react package 中包含 React.createElement、 .createClass、 .Component， .PropTypes， .Children 这些 API，而 react-dom package 中包含 ReactDOM.render、 .unmountComponentAtNode、
.findDOMNode。 -->
<script src="./js/browser.min.js"></script>
<!-- 使浏览器支持babel，你可以使用ECMAscript2015编码(javascript下一代标准) .js、.jsx、.es和.es6 -->

</head>

<body>
<div id="ex1"></div>
<script type="text/babel">
let Animates = React.createClass({
//ceateClass创建的类，首字母必须大写 例如 HelloMessage          
//let是ECMA6的声明变量，用它所声明的变量， 只在let命令所在的代码块内有效。
getInitialState(){
//getInitialState 是系统固定方法，不能变更
//用于设置 this.state 内的初始属性
return {
opacity : 1.0,
}
},
componentDidMount(){
//componentDidMount 是系统固定方法，不能变更
//用于已插入真实 DOM之后 的操作

this.timer = setInterval(function(){
//设置一个定时器
var opacity = this.state.opacity; //获取透明度
opacity -= 0.05;                  //透明度递减
if(opacity <= 0.1){               //当透明度少于等于0.01时，重新赋值 1
opacity = 1;
}
this.setState({                   //设置this.state.opacity 透明度
opacity : opacity,
});

}.bind(this),100);
//注意setinterval()方法中，回调函数一定要加.bind(this)方法,把定时器绑定到dom对象中
},
render(){
return (
//设置内嵌css opacity
<div style={{opacity : this.state.opacity}}>
hello {this.props.name}
</div>
);
}
});

ReactDOM.render(
<Animates name="world" />,
document.getElementById('ex1')
);
</script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航