1. 程式人生 > >jquery中animate方法不支援transform屬性的解決

jquery中animate方法不支援transform屬性的解決

可以通過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/