12.换一批旋转动画实现19-06-18

代码见https://gitee.com/XiaoKunErGe/JianShu.git历史版本第14次提交。
准备工作：到iconfond.com中搜索spin转圈图标，方法参见使用iconfond嵌入头部图标，添加之后要重新将图片下载到本地，
替换以下文件，

屏幕快照 2019-06-18 10.33.52.png
改写代码，将iconfont.css中的@font-face和.iconfont部分代码替换掉，需要把src: url('iconfont.eo......的iconfont指到本地目录==>src: url('./iconfont.eo......。
1.到header的index.js目录下，找到‘换一批’，在前面加一个icon
因为前面对iconfont全局定义过所以要去改下代码，将
<i className={focused ? 'focused iconfont' : 'iconfont '}>&#xe625;</i>
改为<i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe625;</i>
再到style中将

. iconfont {
    position:absolute;
    right: 5px;
    bottom: 5px;
    width: 30px;
    line-heig......

的iconfont改成zoom。
然后添加旋转图标：

 <SearchInfoSwitch onClick={()=> handelChangePage(page, totalPage)}>
        <i className="iconfont spin">&#xe600;</i>
        换一批
 </SearchInfoSwitch>

2.添加给图标spin样式

<SearchInfoSwitch onClick={()=> handelChangePage(page, totalPage, this.spinIcon)}>
              <className="iconfont spin">&#xe600;</i>
              {/*ref可以获取i标签的所有内容*/}
              换一批
            </SearchInfoSwitch>

export const SearchInfoSwitch = styled.span`
  float: right;
  font-size: 13px;
  .spin {
     display: block;//只有在这种状态下才能有rotate效果
     float: left;
     font-size: 12px;
     margin-right: 2px;
     transition: all .2s ease-in; //动画时间和动画效果
     //旋转角度
     // transition: rotate(0deg);
     transform-origin: center center; //旋转中心
     }
`;

3.点击‘换一批’图标添加动画效果
使用ref获取i标签的所有内容，并在onClick中将数据传到方法中。

<SearchInfoSwitch onClick={()=> handelChangePage(page, totalPage, this.spinIcon)}>
              <i ref={(icon)=> {this.spinIcon = icon}} className="iconfont spin">&#xe600;</i>
              {/*ref可以获取i标签的所有内容*/}
              换一批
</SearchInfoSwitch>

在mapDispatchToProps中接收参数处理数据让图标转起来

handelChangePage(page, totalPage, spin) {
      // console.log(spin);
      //原始角度等于 spin transform的值  replace(/[^0-9]/ig,'') 如果transform的值不是0-9的数字就替换为空
      let originAngle = spin.style.transform.replace(/[^0-9]/ig,'');
      // console.log(spin.style.transform);
      if (originAngle){
        //如果originAngle存在的话让它以10进制的方式转化成数字
        originAngle = parseInt(originAngle, 10);
      } else {
        originAngle = 0;
      }
       spin.style.transform = 'rotate(' + (originAngle + 360)+'deg)';
    }
  }
};