html - ジェスチャーに合わせてアニメーションをスワイプ

Question

Web アプリの現在の [次へ] または [前へ] ボタンを置き換えるスワイプ ジェスチャを実装したいと考えています。スワイプ ジェスチャを認識するために、jQuery Mobile、QuoJS、または Hammer.js のいずれかを使用すると思います。

しかし、ジェスチャーに合わせてスワイプ アニメーション (これに似たもの) を実装するにはどうすればよいでしょうか?

例のように画像を切り替えるのではなく、HTML セクションをバックボーン モデル ビューにマッピングします。

Answer 1

これでようやく「解決」しました。スライド効果のある jQuery-UI を使用していますが、思ったほど見栄えがよくありません。Obj-C を使用して iOS のように見せたいと思っています。しかし、それはしなければならないでしょう。

var handleSwipeEvents = function() {
    $(function() {
        $('#myId').on('swipeleft', swipeHandler);
        $('#myId').on('swiperight', swipeHandler);
        function swipeHandler(event) {
            function slideEffect(swipeLeft, duration) {
                var slideOutOptions = {"direction" : swipeLeft ? "left": "right", "mode" : "hide"};
                $('#myId').effect("slide", slideOutOptions, duration, function() { // slide out old data
                    var slideInOptions = {"direction" : swipeLeft ? "right" : "left", "mode" : "show"};
                    $('#myId').effect("slide", slideInOptions, duration); // slide in new data
                    // Alter contents of element
                });
            }
            var swipeLeft = (event.type === "swipeleft");
            slideEffect(swipeLeft, 300);
        }
    });
};

CSS3 とトランジションを使用すると、より良い結果が得られる気がしますが、成功していません。