这是一个奇怪的问题！如何在开始转换之前阻止移动Safari暂停
概述：
我创建一个web应用程序，我已经创建了类似于你在Facebook的应用程序找到一个菜单。向右滑动即可显示，向左并隐藏。
我被一个touchstart事件绑定到页面的主体，在这一点上，我记录下手指按压的起点，并绑定一个touchmove和touchend事件这样做。触摸移动事件通过设置translate3d（x，y，z）以匹配手指位置来查找当前手指位置并移动包含页面内容的div。
它实际上真的很棒。
对touchend然后，我确定手指是否移动得足够远以触发要显示的菜单或内容返回其原始位置。无论选择什么，我都会应用一个类，然后将-webkit-transition：-webkit-transform等应用于内容div。然后，我再次使用translate3d（x，y，z）来设置决定的结束位置，并设置一个变量来阻止任何进一步的水龙头暂时工作。
而这就是出现问题的地方！
问题：
此时如果内容与基本结构，即文章页面布局简单了这一点，那么转换是快速和即时。然而！如果内容很复杂，即一张大型的数据表，那么会有一段时间的停顿，从1秒到30秒...非常令人沮丧。
当它最终发挥作用时，回调会从主体中取消绑定touchmove和touchend事件，并且停止点击的变量将被取消设置，我们已准备好再次开始。
我正在iPad 1上进行测试。在滑动速度和暂停时间之间似乎没有任何关联。内容移动的距离之间也没有任何距离。
最后，我认为这是关键！
有一个按钮可以自动执行相同的打开关闭动作（再次，就像脸书），它可以正常工作，如果你滑动，它会暂停，然后你点击该按钮，它立即开始工作，尽管方向错误它基于已经设置为打开的变量来切换。这几乎就像它清除某种动画队列和排序本身出...
一些代码：
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);
}
很抱歉的长期职位，这已被窃听了我很多！如果我不能对问题进行排序，那么我将不得不将其彻底解决。
我希望有人以前看过这个，可以帮忙。 （或者可以在代码中看到一个昭然若揭的错误上面！）
感谢，
会:)
我在类似的问题上苦苦挣扎，虽然我的使用案例要复杂得多，我没有空间在这里解释它。我也没有答案。但是，我在Instruments下运行我的应用程序，看看发生了什么，看起来像WebKit陷入循环，试图计算部分页面的样式。我的理论是，风格计算忽略了某种最后期限，而且转换永远不会增加。没有任何转换似乎有效，但触发完整的重新计算方式可以修复它。我会建议简化你的CSS，看看是否有帮助。 – 2012-02-26 17:52:41
是的，我一直在试图修复它的样式。正如你所预料的那样，任何带有不透明或模糊的东西都会加快速度，主要是阴影。无论内容是否被移动，实际刷卡都很好而且快速，这真是一种耻辱。无论如何，尽管克里斯。 – will 2012-02-27 09:35:16