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

Posted 2023-05-02

参考技术A 首先使用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：

2D转换下的zoom和transfor:scale的区别

　　一、什么是zoom

　　在我们做项目和查看别人的网页的时候总会在一些元素的样式里，看到有一个家伙孤零零的待在那里，它到底是谁呢？

　　

　　它的名字叫zoom，zoom的意思是“变焦”，虽然在摄影的领域经常被提到，但是在web的世界里也可以这样理解它的意思，就是改变元素的尺寸，进行等比例的缩放。

　　在最初的那些尴尬的岁月里，zoom只能被IE浏览器兼容，但是现在能被除了FireFox以外的所有浏览器支持，甚至是移动端浏览器。

　　zoom的值的类型可以是：

　　　　1.数值：0~1              　当数值为0.5时，表示缩小为原来的一半  zoom:0.5;

　　　　2.百分比：0%~100%    当数值为50%时，表示缩小为原来的一半 zoom:50%;

　　　　3.关键字normal：          表示缩小为原来的一半 zoom:normal;

　　二、transform:scale

　　在css3下的transform:scale是写入css规范里面的属性，从IE9以上版本到其他浏览器都支持。

　　语法（仅2D转换）：

transform: scale(x,y);
transform: scaleX(x);
transform: scaleY(y);

　　首先从这里就可以看出，scale是可以单独控制X轴或Y轴方向上的缩放。

　　并且zoom与scale最基本的区别就在于zoom可以使用数值、百分比和关键字normal，而scale只能使用数值，但scale的值可以使用负数！

　　三、zoom与transform:scale的具体区别

　　当我们给一张图片使用两种方式进行缩放时，他们的区别就很明显了。

　　使用transform:scale缩小为原来的一半：　　

img{
    transform: scale(0.5,0.5);
}

　　使用zoom缩小为原来的一半：

img{
    zoom: 0.5;
}

 　　将使用两种方法缩小后的截图放在一起跟原图进行比较：

　　      　　 原图                                    transform:scale                                zoom

　　                     

　　我们可以看出：

　　1.transform:scale是以图片的中心进行缩放，并且图片占据的原始尺寸不变，文字依然在图片下方。

　　   zoom的方法则是以图片的左上角进行缩放，使图片占据的原始尺寸也跟着改变，文字的位置发生了改变。

　　2.transform:scale不会改变布局，而zoom会改变布局。

　　3.transform:scale会使图片的渲染变得模糊。

          zoom                  transform:scale

　　　　

　　4.由上面两张图可以看出如果缩放的元素中有文字，zoom的方法只能使字体缩小到浏览器最小字体12px，而transform:scale则会让文字跟随图片一起缩放。

　

　　由于zoom的缩放会改变元素占据空间的大小，从而影响到其他元素的布局，所以在应用的时候就麻烦的多，所以如果考虑到响应式和移动端，就要好好斟酌一下_(:зゝ∠)_

　　当然是用zoom来做动画也是可以的~不过还是那句话，注意它会改变布局哦~

　　四、总结

　　transform:scale和zoom的区别可以总结为以下几点：

	值的类型	兼容性	缩放基点	渲染	原始尺寸	字体
transform:scale	数值（可为负）	IE9以上版本以及其他现代浏览器	元素中心	模糊	原始尺寸不变	字体随元素缩放
zoom	数值（不可为负）、百分比、normal	除FireFox以外的所有浏览器	元素左上角	不模糊	原始尺寸一起缩放	字体随元素缩放，但最小只能到达浏览器最小尺寸12px