html - 滑动动画以配合手势

Question

我想实现一个滑动手势来替换我的网络应用程序中当前的下一步/上一步按钮。我想我会使用 jQuery Mobile、QuoJS 或 Hammer.js 来识别滑动手势。

但是我怎样才能实现滑动动画(类似于 this )以配合手势？

我没有像示例中那样在图像之间翻转，而是映射到主干模型 View 的 html 部分。

Answer 1

这终于“解决”了它。我正在使用带有幻灯片效果的 jQuery-UI，但它看起来不像我希望的那样好，我希望它看起来更像在 iOS 上使用 Obj-C。但它必须这样做。

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 和过渡可以取得更好的效果，但我还没有成功。