使用ref、transition、transform实现动画旋转效果

首先使用iconfont增加一个spin图标

将iconfont.css改成iconfont.js注意：

1、使用style-components

2、 <span ref={(icon)=>{this.spinIcon = icon}} className="iconfont spin"></span>

使用了ref参数来获取dom、增加className=spin以区别SearchWrapper下的iconfont绝对布局样式

将spinIcon传入到handleChangePage函数中

我们想通过dom *** 作获取动画样式 spin.style.transform，由于style-component并不支持直接获取，我们直接在函数中定义该属性：

每次点击都旋转360度。

注意增加过渡动画transition：

js控制div旋转的例子：

<DIV id=aDiv style="WIDTH: 70pxPOSITION: absoluteHEIGHT: 70px">

<IMG width=70 height=70 src="http://www.smallrain.net/jsimg/images/pic.gif" />//假如这个图

<DIV>

//使角度转起来

var angle = 0

function doRotate() {

//检查并确保角度值在0到360之间

if(angle>360) angle-=360

//使角度增加

angle+=15

//do rotation

rotate("aDiv",angle)

//定位旋转中心

var el = document.getElementByIdx_x_x("aDiv")//C#中要马上设位置.

el.style.top = 25 - (el.offsetHeight/2)//父元素的高度/2-旋转元素高度/2,还需注意旋转是同父元素的LOP,和left上关的,请上机测试

el.style.left = 25 - (el.offsetWidth/2)//父元素的宽度/2-旋转元素度/2

//循环

setTimeout("doRotate()",20)

}

---