jquery - 如何在开始转换之前阻止移动 Safari 暂停

Question

这很奇怪!

概述:
我正在创建一个网络应用程序，并且我创建了一个类似于您在 Facebook 应用程序中找到的菜单。向右滑动它会显示，向左滑动它会隐藏。

我通过将 touchstart 事件绑定(bind)到页面正文来执行此操作，此时我记录手指按下的起点并绑定(bind) touchmove 和 touchend 事件。触摸移动事件找到当前手指位置，并通过设置 translate3d(x,y,z) 来移动包含页面内容的 div 以匹配手指位置。

它实际上非常好用。

在 touchend 上，然后我计算出手指移动的距离是否足以触发菜单显示或内容是否返回到其原始位置。无论选择什么，我都会应用一个类，该类又将 -webkit-transition: -webkit-transform etc 应用于内容 div。然后，我再次使用 translate3d(x,y,z) 设置了确定的结束位置，还设置了一个变量，用于暂时停止任何进一步的点击。

这就是问题所在!

问题:
此时，如果内容简单且具有基本结构，即文章布局页面，则转换会快速且即时。然而!如果内容很复杂，即一个大数据表，那么就会有一个暂停，从 1 到 30 秒不等……非常令人沮丧。

当它最终起作用时，回调会解除 touchmove 和 touchend 事件与 body 的绑定(bind)，停止点击的变量也被取消设置，我们准备好重新开始。

我正在 iPad 1 上进行测试。滑动速度与停顿时间长短之间似乎没有任何相关性。内容移动的剩余距离也没有。

最后，我认为这是关键!
有一个按钮可以自动执行相同的打开关闭操作(同样，就像 facebook)，它工作正常，如果你滑动，它会暂停，然后你点击那个按钮，它会立即开始工作，尽管在错误的方向上切换基于在已经设置为打开的变量上。这几乎就像它清除了某种动画队列并自行整理......

部分代码:
JavaScript

$body.bind({
    'touchstart': function(e){

        if( !swipeBan ){

            // Reset
            var used = false,
                triggered = false,
                dir = false;

            // Get start point
            start.x = e.originalEvent.touches[0].pageX;
            start.y = e.originalEvent.touches[0].pageY;

            $body.bind({
                'touchmove':    function(e){

                    // Get current value (will be the end value too)
                    end.x = e.originalEvent.touches[0].pageX;
                    end.y = e.originalEvent.touches[0].pageY;

                    // If we have not chosen a direction, choose one
                    if( !dir ){

                        dir = getDir();

                    }else{

                        var left = open && dir == 'left',
                            right = !open && dir == 'right';

                        if( left || right ){

                            var x = left ? maxSwipe - getDist('left') : getDist('right');

                            $content.setTransform(x);

                            used = true;
                            triggered = left ? maxSwipe - x > swipeTrigger : x > swipeTrigger;

                            e.preventDefault();

                        }

                    }

                },
                'touchend': function(e){

                    // Only go further if we are going the correct direction
                    if( used ){

                        swipeBan = true;

                        // Get ready for animation
                        function done(){

                            // Get touching!
                            swipeBan = false;

                            // Stop animating
                            $content.removeClass('animate');

                        }

                        // Add animate class
                        $content.addClass('animate');

                        // Set the value
                        if( ( !open && triggered ) || ( open && !triggered ) ){

                            $content.setTransform(maxSwipe,0,function(){
                                done();
                            });

                            $body.removeClass('closed');

                            open = true;

                        }else if( ( !open && !triggered ) || ( open && triggered ) ){

                            $content.setTransform(0,0,function(){
                                done();
                            });

                            $body.addClass('closed');

                            open = false;

                        }

                    }

                    // Unbind everything
                    $body.unbind('touchmove touchend');

                }
            });

        }else{

            e.preventDefault();

        }

    }
});

您将在上面看到使用的集合转换插件。

$.fn.setTransform = function(x,y,callback){

    y = y ? y : '0';

    var $this = $(this);

    if( callback ){

        $this.one('webkitTransitionEnd',function(){

             callback.apply(this);

        });

    }

    $this.css({
        '-webkit-transform':    'translate3d(' + x + 'px,' + y + '%,0)'
    });

    return this;

}

CSS，很简单。还应用了其他样式，但它们纯粹是视觉效果:

#content.animate {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.16,0,0,1);
}

抱歉发了这么长的帖子，这让我很烦!如果我无法解决问题，我将不得不将其删除。

我希望有人以前看过这个，并且可以提供帮助。 (或者可以在上面的代码中看到一个明显的错误!)

谢谢，

会:)

Answer 1

我最终解决了这个问题，认为它可能对其他人有用!

在触摸移动过渡结束和完成移动的过渡开始之间，根本不要向页面添加任何类。

我的过程曾经是:

1. 在触摸开始时得到手指 x
2. 在基于当前位置和开始的触摸移动位置元素职位
3. 在触摸结束时，决定是继续还是反转动画基于移动的距离。
4. 给决定父元素的close或open添加一类最终位置。

但是，添加此类会强制 safari 应用任何样式更改，这显然是相当密集的，即使更改很少甚至没有更改也是如此。这就是暂停的原因。

我更改了我的流程，使用 javascript 而不是添加类来应用转换，现在它如丝般顺滑。