jquery的animate无法支持transform属性的解决方案

最新推荐文章于 2020-05-14 11:04:39 发布

骆小胖

最新推荐文章于 2020-05-14 11:04:39 发布

阅读量2.8k

点赞数 3

分类专栏： jQuery 笔记随笔前端积累学生提问教学笔录文章标签： jQuery 笔记随笔前端积累学生提问教学笔录 ViewUI

本文链接：https://blog.csdn.net/qq_42445490/article/details/88819103

版权

当使用jQuery的animate尝试实现transform属性的动画效果时，发现无效。文章介绍了三种解决方案：1) 使用CSS方法，但在动画完成后执行，失去了动画效果；2) 通过addClass方法配合CSS类实现动画；3) 下载jQuery补丁文件，但仅支持2D旋转。补丁文件需放在jQuery库之后引入。

摘要由CSDN通过智能技术生成

【前言】

今天有个同事问了道问题，jquery的动画想实现转换类效果，发现无效。。。

【主体】

首先w3c中展示的animate的支持属性:

所以这是jquery本身代码库的问题，animated方法中没有封装transform属性

解决方案：

（1）css方法

$($sub).animate({},5000,function(){
    $(this).css({'transform':'translateX(300px)'});
})

在动画函数的回调函数里执行。时间和效果就没了意义，毕竟函数是在动画完成之后才有调用

（2）addClass方法

可以通过addClass()方法来代替此动作：
比如想旋转一个icon
在css中加入一个class

.add_transform{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);/* IE9 */
    -moz-transform:rotate(180deg);/* Firefox */
    -webkit-transform: