跳到CSS3轉換結束

Question

我有一個應用程序，我試圖從jQuery.animate切換到CSS3轉換，以響應滑動手勢和按鈕按下時移動左/右列表卡片。

除了一件事情之外，它現在很好用。我希望應用程序每次滑動一次就移動一張「頁面」，而且我能夠保留這一點的唯一方法就是在動畫執行時防止滑動。否則，頁面突然變得不一致。

這對手勢滑動很好，但如果用戶點擊一個按鈕或轉動旋鈕瀏覽頁面，它應該每移動一個頁面一頁。如果在動畫中點擊它，我希望動畫跳到最後並開始一個新的動畫。

使用jQuery很容易清除動畫隊列並跳到動畫的結尾。這正是我想要的，但使用CSS3。但是，到目前爲止，我還沒有弄清楚如何做到這一點。下面是我停止CSS3轉換的一個嘗試，但它似乎並沒有工作（單擊一次滑動的平方，單擊中間幻燈片以刪除CSS3轉換屬性）。但是，第二次點擊不會停止動畫。

http://jsfiddle.net/RnKyz/1/

任何方式跳到動畫的結尾？

Answer 1

您可以通過啓動原創動畫，然後刪除之前添加類，當你想停止「停止」動畫：

演示：http://jsfiddle.net/SO_AMK/LXqcz/2/

CSS：

#block { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background: #ff0000; 
} 

.animate { 
    transition: left 2s; 
    -moz-transition: left 2s; 
    -webkit-transition: left 2s; 
    -o-transition: left 2s; 
    -ms-transition: left 2s; 
}​ 
​ 

jQuery：

$("#block").on("click", function() { 
    $(this).addClass("animate").css("left", "300px"); 

    $(this).off("click"); 
    $(this).on("click", function() { 
     $(this).removeClass("animate"); 
    }); 
});​ 

注：我簡化了co de的演示，完整的「固定」代碼在這裏：http://jsfiddle.net/SO_AMK/LXqcz/