0

我有一个应用程序，我试图从 jQuery .animate 切换到 CSS3 转换，以向左/向右移动卡片列表以响应滑动手势和按钮按下。

它现在很好用，除了一件事。我希望应用程序每次滑动一次移动一个“页面”卡片，而我能够保留这一点的唯一方法是在执行动画时防止滑动。否则，页面会突然失去对齐。

这对于手势滑动来说很好，但是如果用户单击按钮或转动旋钮来导航页面，则每次单击它应该移动一页。如果在动画期间单击它，我希望动画跳到最后并开始一个新动画。

使用 jQuery 很容易清除动画队列并跳到动画的末尾。这正是我想要的，但使用 CSS3。但是，到目前为止，我还无法弄清楚如何做到这一点。

下面是我尝试停止 CSS3 过渡，但它似乎不起作用（单击正方形一次滑动，单击中间滑动以删除 CSS3 过渡属性）。但是，第二次单击不会停止动画。

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

有什么方法可以跳到动画的结尾？

4

1 回答 1

4

您可以通过在开始原始动画之前添加一个类来“停止”动画，然后在您想要停止它时将其删除：

演示：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/

于 2012-09-14T00:33:24.307 回答