これは奇妙なものです！移行を開始する前にモバイルSafariを一時停止しないようにする方法
概要：
私は、Webアプリケーションを作成していると私はあなたがFacebookアプリで見つけるだろうものに類似したメニューを作成しました。右にスワイプすると、左に隠れて見えます。
私はtouchmoveとtouchendイベントをバインドも指プレスの開始点を記録し、この時点では、ページの本文へtouchstartイベントを結合することによって、これをやっています。タッチ移動イベントは、現在の指の位置を見つけ、translate3d（x、y、z）を指の位置と一致するように設定して、ページの内容を含むdivを移動します。
実際には本当にうまく機能します。
オンtouchend次に、指を表示してコンテンツを元の位置に戻すのに十分な距離を移動したかどうかを確認します。選択肢に関係なく、私はクラスを適用し、それは-webkit-transition：-webkit-transform等をコンテンツ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();
}
}
});
：それはいくつかのコード...それはアニメーションキューと種類自体うちのいくつかの種類をクリアして、ほぼ同じよう
です。
$.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);
}
長い記事のために申し訳ありませんが、これは私に多くのことを盗聴されています！私が問題を並べ替えることができなければ、それを取り除かなければならない時点です。
私は以前誰かがこれを見て、助けてくれることを願っています。 （または、上記のコードでは紛れも明白な誤りを見ることができます！）
おかげで、
は、私は、最終的にこれを解決し、それが他の人に有用である可能性が考え
同様の問題で苦労していますが、私のユースケースはかなり複雑で、ここで説明する余地はありません。私も答えはありません。しかし、Instrumentの下でアプリを走らせて何が起きているのかを見て、WebKitがループの中で動き、ページの一部のスタイルを計算しようとしているように見える。私の理論は、スタイル計算がある種の期限を逸し、移行が決して前進しないということです。トランジションは機能していないようですが、フルスタイルの再計算をトリガーすると修正されます。私はあなたのCSSを簡素化し、それが役立つかどうかを確認することをお勧めします。 –
さて、私はそれを修正するためにスタイルをリッピングしてきました。予想通り、不透明またはぼかしのものは、ほとんどが影を出します。実際のスワイプが移動中のコンテンツに関係なく素早く素早く行われるのは残念です。とにかくKrisに感謝します。 – will