это странный!Как отключить мобильный Safari от паузы до начала перехода
Обзор:
Я создаю веб-приложение, и я создал меню, похожий на тот, который вы хотите найти в приложении Facebook. Проведите пальцем вправо, и он показывает, слева и скрывается.
Я делаю это путем связывания touchstart события в тело страницы, на данный момент записывает начальную точку пальца прессы, а также связать TouchMove и touchend события. Событие перемещения касания находит текущее положение пальца и перемещает div, содержащий содержимое страницы, путем установки translate3d (x, y, z) в соответствии с положением пальца.
Это действительно работает очень здорово.
touchhend Затем я выясняю, прошел ли перемещение пальца достаточно далеко, чтобы вызвать отображаемое меню или вернуть содержимое в исходное положение. Независимо от выбора, я применяю класс, который, в свою очередь, применяет -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);
}
Извините за длинный пост, это было пристанет мне много! Это в тот момент, когда мне придется разрывать его, если я не могу разобраться в проблеме.
Я надеюсь, что кто-то видел это раньше и может помочь. (Или может увидеть вопиюще очевидную ошибку в коде выше!)
Спасибо,
будет :)
Я борюсь с подобной проблемой, хотя мой прецедент значительно сложнее, и у меня нет возможности объяснить это здесь. У меня также нет ответа. Тем не менее, я запустил приложение под инструментами, чтобы посмотреть, что происходит, и похоже, что WebKit застрял в цикле, пытаясь рассчитать стили для части страницы. Моя теория заключается в том, что расчет стиля пропускает какой-то крайний срок, и переход никогда не увеличивается вперед. Никакие переходы, похоже, не работают, но запуск полного пересчета стиля исправляет его. Я бы предложил упростить свой CSS и посмотреть, поможет ли это. –
Да, я срывал стили, пытаясь исправить это. Как вы и ожидаете, все с прозрачностью или размытием ускоряет работу, в основном тени. Жаль, что фактическое прокручивание приятно и быстро, независимо от перемещаемого содержимого. Спасибо, хотя Крис. – will