jquery中animate方法不支持transform属性的解决

最新推荐文章于 2025-11-26 15:14:16 发布

原创最新推荐文章于 2025-11-26 15:14:16 发布 · 1.7w 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用CSS样式和jQuery来实现元素的旋转动画效果。通过为元素添加特定的CSS类，可以使其平滑地旋转180度，并利用jQuery的toggleClass方法触发动画。此外，还提供了一个可选的jQuery插件来增强浏览器兼容性和动画效果。

可以通过addClass()方法来代替此动作：

比如想旋转一个icon:

在css中加入一个class

.add_transform{
   transform:rotate(180deg);
   -ms-transform:rotate(180deg); 	/* IE 9 */
   -moz-transform:rotate(180deg); 	/* Firefox */
   -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
    -o-transform:rotate(180deg); 	/* Opera */
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out; /* Firefox 4 */
    -webkit-transition: all 0.5s ease-in-out; /* Safari 和 Chrome */
    -o-transition: all 0.5s ease-in-out; /* Opera */
}

然后通过$("选择器").toggleClass(".add_transform");来使icon的旋转变为动画效果。

或者下载补丁（加一个js文件）：

https://github.com/zachstronaut/jquery-animate-css-rotate-scale/