2017-03-15-react-css3-transition
在汇智网学习react,今天学习,react中的CSS3 Transiton 按照例子做了一个仪表盘 知识点
实践代码
代码1: 遇到的问题问题1React.findDOMNode(this.refs.ptr)
报错: Uncaught TypeError: React.findDOMNode is not a function
在这里找到了答案。正解是:在最新的react版本中, 问题2我想,既然是 要让指针转动,我设置指针的角度,不断地改变角度值不是就可以了吗? getInitialState: function() {
return {
value: 0,//速度值
mounted: false,//是否已经挂到dom
degree: -201
};
render: function() {
if (this.state.mounted) {
this.setState({degree:(this.props.value / 220) * 265 - 201});
//确保之前的样式生效
window.getComputedStyle(ReactDOM.findDOMNode(this.refs.ptr)).transform;
}
var style = {
transform: 'rotate(' + this.state.degree + 'deg)'
}
return (
...
)
}
无情报错: Uncaught RangeError: Maximum call stack size exceeded
at h._updateDOMProperties (react-dom.min.js:13)
at h.updateComponent (react-dom.min.js:13)
at h.receiveComponent (react-dom.min.js:13)
at Object.receiveComponent (react-dom.min.js:14)
at Object.updateChildren (react-dom.min.js:13)
at h._reconcilerUpdateChildren (react-dom.min.js:14)
at h._updateChildren (react-dom.min.js:14)
at h.updateChildren (react-dom.min.js:14)
at h._updateDOMChildren (react-dom.min.js:13)
at h.updateComponent (react-dom.min.js:13)
at h.receiveComponent (react-dom.min.js:13)
at Object.receiveComponent (react-dom.min.js:14)
解决方案
这让我想起了
由此我猜测试 效果过渡时,设置了state,引起 第二种实现方式(多余)但是我还是觉得这个方案是可行的,然后我再看了看代码。发现好像逻辑怪怪的。 render: function() {
console.log('渲染第'+(++i)+ '次');
console.log('时钟的角度'+this.state.degree);
if (this.state.mounted) {
//根据属性值计算旋转角度
if(this.state.degree < (this.props.value / 220) * 265 - 201){
this.setState({degree: ++ this.state.degree });
}
//确保之前的样式生效
window.getComputedStyle(ReactDOM.findDOMNode(this.refs.ptr)).transform;
}
return (
...
)
}
效果是可以的,但是看日志发现,渲染了243次=.= ,应为是一次一次加的。再想想,看到了自己写的css .pointer{ position:absolute; left:150px; top:105px; transform-origin : 1px 45px; transition : transform 2s; /*注意这一行*/ }
发现自己完全没必要去 这么一点一点的增加角度来实现效果。(⊙o⊙)… 哎,我想多了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |