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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用ref、transition、transform实现动画旋转效果相关的知识,希望对你有一定的参考价值。

参考技术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

以上是关于使用ref、transition、transform实现动画旋转效果的主要内容,如果未能解决你的问题,请参考以下文章

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

index.js:找不到模块'.../@react-native-community/cli/node_modules/metro-react-native-babel-transformation/

index.js:找不到模块'.../@react-native-community/cli/node_modules/metro-react-native-babel-transformat

vue router怎么获得当前页面的路由

用vue router如何获得当前页面的路由?

在视频对象间使用转场gl-transition之regl-transition 使用