Не удалось остановить переход преобразования CSS3 с помощью translate3d

Я пытаюсь анимировать элемент с помощью переходов CSS3 с помощью translate3d: JSFiddle.

// for start animation
$("#content")
    .css("-webkit-transition", "all 100s");
    .css("-webkit-transform", "translate(0, -900px)");
// for stop animation
$("#content")
    .css("-webkit-transition", "none");

В десктопном Chrome и Safari это хорошо, но в дефолтном браузере на Android 4.1.x (SGSII, Galaxy Nexus и т.д.) такой подход не работает - переход не останавливается. Кроме того, я отмечаю, что ситуация только относительно translate3d: с помощью свойств CSS translate и position (например, «сверху», «слева») это работает.


android css transform translate3d transitions
person Alexander Ziborov    schedule 18.03.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Реализация перехода на Android 4 кажется ошибочной в тех случаях, когда переходный слой с аппаратной визуализацией отменяется путем настройки webkitTransitionDuration на 0 (и установка webkitTransition на 'none' или '' часто подразумевает это). Это можно обойти, используя длительность перехода .001ms или подобную, хотя это, скорее всего, по-прежнему отрисовывает несколько кадров.

Более практичный обходной путь, по крайней мере, на некоторых устройствах, состоит в том, чтобы использовать отрицательное значение для webkitTransitionDelay, заставляя новый переход вступить в силу, но выбирая это значение так, чтобы переход начинался непосредственно в его законченном состоянии.

Вот так:

e.style.webkitTransition = '-webkit-transform linear 10s';
e.style.webkitTransform = 'translate3d(100px,100px,0)';

# now cancel 10s-long transition in 1s and reset transformation
setTimeout(function() {
    e.style.webkitTransitionDelay = '-10s'
    e.style.webkitTransform = 'translate3d(0,0,0)';
}, 1000)
person Emiel Mols    schedule 02.05.2013

arrow_upward
0
arrow_downward

Вот что я обнаружил с помощью некоторых экспериментов:

Остановку запущенного translate2d или 3d в chrome, safari, firefox и iphone webview можно выполнить, установив переход «нет» или переход с отрицательной или нулевой временной задержкой и задав новый перевод в текущую позицию, как описано выше.

Однако это не работает для веб-просмотра Android. Единственное решение, которое я смог найти для Android, состояло в том, чтобы установить задержку перехода на небольшое положительное число, например 0,001 с, и дать перевод для текущей позиции.

Обратите внимание, что в iphone webview решение с отрицательной задержкой перехода предпочтительнее, чем «нет» или небольшое положительное число, которое будет отображать конечную позицию текущего перехода перед выполнением вытеснения следующего перехода.

person Sani Elfishawy    schedule 12.11.2013

arrow_upward
0
arrow_downward

Это решает мою (очень похожую) проблему:

$el.removeClass('THE_ANIMATION').css('opacity', 0.99);
window.setTimeout(function () {
  $el.css('opacity', 1); 
}, 0);
person Neil Taylor    schedule 09.06.2014