Question

这是一个奇怪的！

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

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

它确实非常棒。

在 touchend 上，然后确定手指是否移动得足够远以触发菜单显示或内容是否返回其原始位置。无论选择什么，我都应用一个类，然后将 -webkit-transition：-webkit-transform etc 应用于内容div。然后我再次使用 translate3d（x，y，z）设置决定的结束位置，并设置一个变量来阻止任何进一步的抽头暂时工作。

这就是出现问题的地方！

问题：
此时，如果内容是简单的，具有基本结构，即文章布局页面，则转换是快速且即时的。然而！如果内容很复杂，即一个大的数据表，则会有一个暂停，在1到30秒之间......非常令人沮丧。

当它最终起作用时，回调取消绑定触摸移动并触发来自正文的事件，并且取消设置停止点击的变量，我们已准备好重新开始。

我正在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();

        }

    }
});

您将在上面看到的set transform插件。

$.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

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

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

我的过程曾经是：

在touchstart上获取手指x
在touchmove位置元素基于当前位置和开始位置
在触摸结束时，决定是继续还是反转动画基于移动的距离。
向确定的父元素添加一个close或open类最后的位置。

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

我改变了我的流程，使用javascript来应用转换，而不是添加类，现在它已经过时了。

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

1 个答案: