跳到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/