0

jQuery .animate から CSS3 トランジションに切り替えて、スワイプ ジェスチャやボタンの押下に応じてカードのリストを左右に移動しようとしているアプリがあります。

1つのことを除いて、現在はうまく機能しています。アプリでスワイプごとにカードの「ページ」を一度に移動させたいのですが、これを維持できる唯一の方法は、アニメーションの実行中にスワイプを防止することでした。そうしないと、ページが突然ずれてしまいます。

これはジェスチャ スワイプでは問題ありませんが、ユーザーがボタンをクリックしたり、回転ノブを回してページを移動したりする場合は、クリックごとに 1 ページ移動する必要があります。アニメーション中にクリックすると、アニメーションを最後までスキップして新しいアニメーションを開始したい。

jQuery を使用すると、アニメーション キューをクリアしてアニメーションの最後までスキップすることが簡単にできました。これはまさに私が望んでいるものですが、CSS3 を使用しています。しかし、これまでのところ、私はそれを行う方法を理解できていません。

以下は、CSS3 トランジションを停止しようとした試みですが、うまくいかないようです (四角形を 1 回クリックしてスライドし、スライドの中央をクリックして CSS3 トランジション プロパティを削除します)。ただし、2 回目のクリックではアニメーションは停止しません。

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 に答える