翻譯jQuery的動畫到CSS3插件IM的

jquery.animate-enhanced.min.js
jquery.easing.1.3.js

基本上，IM試圖將一些jquery動畫轉換爲「純粹的CSS3過渡」。

這是工作的代碼IM：

$(this).animate({ 
        bottom:(docHeight-80),  
       },600, 
       'easeOutElastic', 
       function(){ 
        $(this).animate({ 
         bottom:(docHeight-140),  
        },800); 

       } 
      );

就這樣，這工作得很好（見http://jsfiddle.net/5dfCz/），我現在想使用CSS3相應轉變爲這種動畫是相當CPU昂貴。

所以，我試圖使用動畫增強插件。除了使用CSS3之外，這個工作方式，當動畫/轉換完成時，我絕對div的底部屬性不會被保留。你可以看到這裏的jsfiddle：http://jsfiddle.net/2p8Gu/

嘗試後動畫讓我奇怪的影響解決DIV位置，看到有：http://jsfiddle.net/cAUt7/

而且，我讀過增強插件doc和帶有選項「avoidTransforms」玩， 'useTranslate3d'和'leaveTransforms'沒有更多的成功。

所以，我的問題：

我怎麼會做這種在CSS3動畫？

PS：當轉換爲CSS3時，緩動效果不再有效，但我不知道實際上CSS3支持這種效果或者如何去做。

來源

2012-11-07 A. Wolff

實際上，您可以使用代碼較少的CSS3來實現。您需要的唯一Javascript就是將一個CSS類添加到元素的一行。 CSS類將包含執行動畫所需的CSS3轉換屬性。

例（使元素增長1.5倍大小）：

.someElement { 
    -webkit-transition: .5s all linear; // animate all animatable CSS property changes 
    -webkit-transform: scale(1); 
} 
.someElement.enlarged { 
    -webkit-transform: scale(1.5); 
}

然後只是這樣做在你的JS：

$(".someElement").addClass("enlarged"); // make it big 
$(".someElement").removeClass("enlarged"); // make it normal size again

的Et瞧。您可以爲不透明度，尺寸，位置，填充，邊距，顏色（字體，背景等）以及大量其他內容製作動畫。大多數（但不是全部）屬性支持動畫。檢查規格和您的本地瀏覽器供應商，看看哪些是可動畫的。

來源

2013-01-08 08:26:13 Aquarelle

翻譯jQuery的動畫到CSS3插件IM的

回答

相關問題