css 点击按钮旋转

css 点击按钮旋转
需求：点击按钮进行旋转，当接口调用完毕后，图片停止旋转
实现：添加一个状态值，用于判断何时旋转
代码：
1、给出初始style reloadimg

let className = ['reloadimg']
if (this.state.xuanzhuan === true) {
  className.push('xuanzhuan')
}

2、显示代码

<div className='reloadimg-wrap'>
  <Tooltip placement='bottom' title='刷新'>
    <div>
      <img
        // className='reloadimg xuanzhuan'
        className={className.join(' ')}
        src={require('./icon_reload.png')}
        alt=''
        onClick={() => {
          this.getNewEmail(true, 'shuaxin')
        }}
      />
    </div>
  </Tooltip>
</div>

3、css样式

  .reloadimg-wrap {
        margin-left: 8px;
        @keyframes rot_test {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
        .reloadimg {
          width: 14px;
          display: block;
          cursor: pointer;
          user-select:none;
        }
        .xuanzhuan{
          animation: rot_test 1s linear infinite;
        }
      }

判断条件，需要旋转时，增加xuanzhuan属性，反之，去除