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

Question

Невозможно остановить 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 реквизита (например, "top", "left") это работает.

2

android css3 transform transitions translate3d

Источник

user1879793 18 мар '13 в 18:32

3 ответа

Другие вопросы по тегам android css3 transform transitions translate3d

user398330 02 май '13 в 17:37 2013-05-02 17:37 · Answer 1 · 2013-05-02 17:37

Реализация перехода на 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)

user2299835 09 июн '14 в 12:51 2014-06-09 12:51 · Answer 2 · 2014-06-09 12:51

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

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

0

Источник

user2299835 09 июн '14 в 12:51

user2450323 12 ноя '13 в 02:18 2013-11-12 02:18 · Answer 3 · 2013-11-12 02:18

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

Остановка работы translate2d или 3d в веб-просмотре chrome, safari, firefox и iphone может быть выполнена путем установки перехода "none" или перехода с отрицательной или нулевой задержкой и присвоения нового перевода текущей позиции, как описано выше.

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

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