React 获取元素的style,实现旋转刷新特效

React 获取元素的style,实现旋转刷新特效

 

一、功能需求

如下图所示:利用react点击“换一换”实现小图标旋转刷新效果

二、index.js代码:

html:

<SearchInfoSwitch onClick={() => {handleChangePage(page, totalPage, this.spinIcon)}}>
   {/* ref==获取元素dom  */}
    <i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">&#xe659;</i>
    换一批
</SearchInfoSwitch>

ps:这里是利用react的ref 获取dom元素,从而进行修改其样式

css:

export const SearchInfoSwitch = styled.div`
  float: right;
  font-size: 13px;
  color: #969696;
  background-color: transparent;
  border-width: 0;
  padding: 0;
  text-decoration: none;
  .spin{
    float: left;
    display: block;
    font-size:12px;
    margin-right: 5px;
    transition: all .2s ease-in;
    transform-origin: center center;
  }
`

三、功能实现

handleChangePage(page, totalPage, spin) {
	// 如果不是0-9的数字,都替换成空
	let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
	if (originAngle) {
		originAngle = parseInt(originAngle, 10);
	} else {
		originAngle = 0;
	}
	spin.style.transform ='rotate('+(originAngle+360)+'deg)';
	if(page < totalPage){
		dispath(actionCreators.changePage(page+1))
	} else {
		dispath(actionCreators.changePage(1))
	}
}

ps:当点击换一批的时候,dom元素的transform的值发生变化。从而实现点击旋转的效果。(需要点击换一批数据分页效果的可以加QQ找我要)

未经允许不得转载:小月博客 » React 获取元素的style,实现旋转刷新特效
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏