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

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

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

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

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

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

Обновлять:

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

http://jsfiddle.net/w9E7t/

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

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

css css-transitions webkit
person Chris Bosco    schedule 29.08.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

  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, чтобы показать мой пример здесь.

person skyline3000    schedule 30.08.2011
comment
Спасибо за ваш ответ! Похоже, что в большинстве случаев вы можете просто обновить это свойство, если присутствует реальная физическая задержка. Я обновил свой вопрос примером jsfiddle, показывающим точную проблему, которую я вижу, и похоже, что мне нужно ввести задержку с помощью setTimeout. Я хочу вернуться к классу with_transition, как и в большинстве случаев, это значение по умолчанию. Любопытны ваши мысли - person Chris Bosco; 01.09.2011
comment
Спасибо за обновление, это будет полезно в еще другом случае! :) Это только я или все вводные примеры перехода в Интернете, которые имеют эффект ссылки: hover, в значительной степени бесполезны? ха-ха - person Chris Bosco; 22.09.2011