如何在「animate」方法中爲「-webkit-transform」設置css值？

可能重複：
Animate element transform rotate 如何在「animate」方法中爲「-webkit-transform」設置css值？

當我嘗試動畫使用jQuery在我的頁面圖像的旋轉，這是無法理解的CSS屬性「-webkit-改造」的元素，怎麼了？

javascript代碼：

$("body").toggle(
function(){ 
    $("img").animate(
     { 
     opacity:0.5, 
     "-webkit-transform":"rotate(180deg)" 
     },1000,function(){ 
      //some function 
     } 
    ); 
}, 
function(){ 
    $("img").animate(
     { 
     opacity:1, 
     webkitTransform:"rotate(-180deg)" 
     },1000,function(){ 
      //some function 
     } 
    ); 

}); 

});

來源

2012-07-15 test1604

爲什麼使用jQuery進行動畫？改用CSS3：'-webkit-transition：-webkit-transform;' – 2012-07-15 21:20:43

谷歌搜索「動畫變換jquery」調出 [這個其他問題]（http://stackoverflow.com/questions/5462275/animate-element-transform-旋轉）總之，簡單的動畫不能做到這一點，但有另一種方法。 – xixixao 2012-07-15 21:26:47

jQuery的animate法不承認webkit變換屬性，你可以使用支持該功能的jQuery插件，嘗試jQuery Transit。

來源

2012-07-15 21:10:30 undefined

有很多插件可以處理這個問題，但是如果你不想用，你真的不需要使用它們。

$.fx.step將處理您的所有需求，也是非常有用和值得學習。

下面是一個例子：

$.fx.step.webkitRotate = function(fx){ 
     if(!fx.init){ 
      var currentRotation = fx.elem.style.webkitTransform; 
      currentRotation = currentRotation.split('(')[1]; 
      currentRotation = currentRotation.split('deg)')[0]; 
      fx.begin = currentRotation; 
      fx.init = true; 
     }   
     fx.elem.style.webkitTransform = 'rotate('+fx.pos+'deg)'; 
};

，那麼你可以：

$("img").animate(
    { 
    opacity:1, 
    webkitRotate:-180 
    },1000,function(){ 
     //some function 
    } 
);

其粗例子，需要細化，但希望你的想法。 Useinf $.fx.step您可以設置自定義動畫參數來爲dom的任何方面甚至變量設置動畫。您甚至可以使用它進行自定義計算，以確定動畫中的下一步。例如：我最近使用$.fx.step在css3漸變上做了一個自定義動畫，目前沒有插件。

如果你必須使用一個撐着旋轉，我建議：http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

但是最終他撐着使用$.fx.step其值得學習你自己的。

來源

2012-07-15 22:43:01 Fresheyeball

我不知道你可以製作你自己的步驟動畫。謝謝！ – Vestride 2012-07-16 01:45:05

@Vestride（pssst，vote？） – Fresheyeball 2012-07-16 07:12:23

如何在「animate」方法中爲「-webkit-transform」設置css值？

回答

相關問題