Есть ли правильный способ динамически обновлять части преобразований и переходов программно? например трансформация-источник или длительность - PullRequest
Новая
       6

Есть ли правильный способ динамически обновлять части преобразований и переходов программно? например трансформация-источник или длительность

1 голос
/ 29 августа 2011

Я создаю сенсорное приложение для iOS Safari и нахожу, что CSS-переходы и преобразования отлично работают.

Но у меня есть две вещи, которые я не могу достичь, используя только JavaScript и CSS.

  1. Обычно я хочу, чтобы элемент переводился с продолжительностью 0,2 с. Но в коде я иногда хочу мгновенно перевести (первоначальное позиционирование). Если я обновлю длительность до 0 или полностью уберу стиль перехода, то это, похоже, не даст эффекта (действует так, как если бы 0.2s был неизменным)

  2. При масштабировании я хочу обновить свойство transform-origin. Это также, похоже, не работает, и кажется застрял в моем исходном значении таблицы стилей. В частности, я пытаюсь сделать это на событиях начала и окончания жеста

Надеюсь, есть подход к созданию этой работы. Может быть setTimeout асинхронная обработка?

Обновление:

У меня есть пример js fiddle, чтобы лучше проиллюстрировать мою проблему в # 1, и выясняется, что setTimeout исправляет ее, но это странное решение, которое мне было бы интересно улучшить:

http://jsfiddle.net/w9E7t/

Кажется, что я не могу выполнить эти шаги синхронно:

  1. установить соответствующие классы для мгновенного перехода
  2. применить стиль перехода
  3. сбросить классы в состояние по умолчанию (с переходом)

1 Ответ

1 голос
/ 30 августа 2011

  1. Это можно сделать с помощью двух классов CSS, один из которых устанавливает timing-duration в 0, а другой - 200 мс, а затем применяет классы программно в JS. Взгляните на это JSFiddle для примера.

    Одной из лучших практик веб-разработки является разделение частей вашего документа на структуру / контент (HTML), презентацию (CSS) и взаимодействие / поведение (JS). В приведенном выше примере представление содержимого (синхронный перевод) остается определенным в CSS, а JS используется только для ответа на взаимодействие (событие MouseClick).

  2. Вы можете изменить элемент transform-origin, используя свойство стиля WebkitTransformOrigin в JS. Вот пример JSFiddle . Я проверил это на своем iPhone4, и он правильно зарегистрировал новые источники трансформации в консоли. Опять же, этого также можно достичь, используя JS только для прослушивания событий жестов и обновления класса элемента, сохраняя при этом правила стиля класса, определенные в логике представления (CSS).

Обратите внимание: в моих примерах я обновляю элемент .className. Поскольку у ваших элементов уже может быть много классов, вам может понадобиться реализовать функции addClass / removeClass, чтобы правильно установить правильные классы, несколько примеров которых можно найти в Интернете.

Обновление:

Извините за задержку ... Есть два способа решения этой проблемы, и первый, который вы уже обнаружили.

Другим способом обработки обратного имени класса является использование свойства webkitTransitionEnd. Это срабатывает всякий раз, когда переход на элементе заканчивается. Это будет выглядеть так: 

document.getElementById('puck').addEventListener('webkitTransitionEnd', function() {
    puck
        .removeClass('without_transition')
        .addClass('with_transition')
}, false);

К сожалению, когда свойство transition-duration установлено в 0, это событие не вызывается :( Я не уверен, что это из-за замысла или из-за ошибки, но это только то, как это в настоящее время реализовано (хотя я предполагаю, это дизайн, так как на данный момент браузер не на самом деле делает переход, а скорее просто применяет преобразование.) Обходной путь в этом подходе состоит в том, чтобы установить transition-duration в 1 мс (что, по сути, будет выглядеть мгновенно) .

Хотя подход setTimeout выглядит хакерским, многие мобильные каркасные группы используют его в своем коде, поскольку функция будет запускать после перехода, происходящего из переключения классов (аналогично transitionEnd). Взгляните на Sencha Touch, и вы найдете его много раз.

Я разбудил твой JSfiddle, чтобы показать мой пример здесь .

...