滑动动画以配合手势答案

【问题标题】：Swipe animation to go with gesture滑动动画以配合手势
【发布时间】：2013-06-12 08:26:53
【问题描述】：

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

但是如何实现滑动动画（类似于this）以配合手势？

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

【问题讨论】：

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

【讨论】：