jquery - 跳到 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");
    });
});​

注意:我简化了演示代码，完整的“固定”代码在这里:http://jsfiddle.net/SO_AMK/LXqcz/