中斷/停止實際位置/狀態的CSS3轉換

Question

我在寫一個jQuery插件來通過CSS3轉換爲元素設置動畫。在jQuery中，有.stop()中斷選定元素上的當前動畫。

任何想法如何我可以停止正在運行的CSS3動畫？是否有一種原生的方式來處理這個問題，還是我必須測量動畫，並將動畫元素的樣式設置爲當前位置，顏色大小或whaterver？

這是jQuery插件的當前狀態： http://jsfiddle.net/meo/r4Ppw/

我試圖設置爲「-webkit - 過渡持續時間」爲0 /無/假。但它不會停止動畫。

Answer 1

不打算在插件太深，你可以重複使用您css3animate方法使用當前（計算）你想要的道具值，設定時間爲0（1，因爲你在你的插件使用!speed使用

var $animated = $('div'); 
$animated.css3animate({"height": $animated.css('height'), "width": $animated.css('width')}, 1); 

會做的伎倆使用默認..）

所以這個例子。在http://jsfiddle.net/T5LVX/1/

當然

例如，您應該爲當前使用的特性自動完成這個。如果你使用一個計時器，當您啓動動畫，另一個當有人使用停止方法，也可以模擬一個暫停/恢復功能..

---

更新

您可以存儲通過cssObject到動畫，到元素的data，並通過停止循環來獲取當前值。

所以你animation方法你可以$obj.data('animationCss', cssObject);並在stop方法

stop : function(clearQueue,jumpToEnd){ 
    return this.each(function(){ 
     var $that = $(this); 
     var currentCss = {}; 
     var animationCss = $that.data('animationCss'); 
     for (var prop in animationCss) 
      currentCss[prop] = $that.css(prop); 

     if (jumpToEnd) 
     { 
      animation($that,currentCss,1, function(){animation($that,animationCss,1)}); 
     } 
     else 
     { 
      animation($that,currentCss,1); 
     } 
     console.log("stop was called"); 
    }); 
    } 

例如：http://jsfiddle.net/T5LVX/6/