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/

跳过CSS3过渡的结束

1 个答案: