CSS 3 переходы с непрозрачностью - Chrome и Firefox - PullRequest
Новая
       32

CSS 3 переходы с непрозрачностью - Chrome и Firefox

2 голосов
/ 15 июля 2011

Я поигрался с переходами CSS3, чтобы исчезнуть в оверлейном div, когда я столкнулся с необычной проблемой.

По сути, у меня есть элемент div, у которого установлены стили для его идентификатора - то есть background-color: # 000, opacity: 0 и т. Д., А также стили перехода, специфичные для браузера. По умолчанию наложенный элемент имеет класс «hiddenElement», в котором для него не задано ни одного отображения.

Когда наложение должно отображаться, класс hiddenElement удаляется, и добавляется другой класс «Initialized», этот класс устанавливает непрозрачность элементов равной 0,6.

Я ожидал, что элемент будет плавно анимирован, что происходит в Opera, но в Firefox и Chrome он работает не совсем так.

Я построил здесь отдельный случай: http://jsbin.com/obojet/27/.

Как вы можете видеть, когда addClass ('Initialised') "обернут в setTimeout (), даже с таймаутом 0 мс в chrome, он анимируется правильно. Просто делать addClass вне тайм-аута, не делать анимацию. В Firefox время ожидания должно быть больше - 50 мс. В опере это просто работает.

Вероятно, дело в UI / Javascript, сражающемся за один поток, но мне было просто любопытно, сталкивался ли кто-либо с подобными проблемами.

1 Ответ

2 голосов
/ 15 июля 2011

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

Предсказуемый способ сделать это:

  1. Установить начальное состояние объекта.
  2. Установить связанный с переходом CSS3 для объекта.
  3. Объект не должен быть display: none на данный момент.
  4. Позвольте браузеру вернуться в цикл обработки событий и перерисовать все, что нужно перекрасить, чтобы установить состояние перед анимацией.
  5. Затем добавьте класс к объекту, который устанавливает конечное состояние и запускает анимацию.
  6. Возврат в цикл событий браузера для запуска анимации.

Непредсказуемый способ сделать это:

  1. Все, что связано с отображением: ни в одном из состояний.
  2. Установка основного состояния и правил перехода CSS3
  3. Установить конечное состояние, не позволяя браузеру вернуться к циклу событий.
  4. Вернитесь к циклу событий (часто переход CSS3 не происходит).

Я вижу ценность в возможности программного изменения целого ряда свойств одновременно, не инициируя начало перехода CSS3. Но, нередко вы хотите установить начальное состояние с помощью набора кода, программно настроить переход, который вы хотите осуществить, и затем установить конечное состояние в одном куске кода. Сегодня вы не можете сделать это и получить надежное поведение. Вам нужно будет вставить несколько вызовов setTimeout посередине. Было бы неплохо иметь синхронный вызов функции для установки начального состояния, которое сообщало бы браузеру: ОК, я делаю настройку начального состояния этого объекта. Любые изменения, которые я делаю отныне, я хочу, чтобы вы включили в CSS3-переходы, которые я установил. Тогда вам не понадобится дополнительный setTimeout без смысла.

В вашем примере показаны подобные вещи. Вы можете заставить его работать без setTimeout, если ваше начальное состояние будет opacity: 0; вместо display: none;, хотя я понимаю, что это может быть не тем, что вы хотите. Затем начальное состояние (без отображения: нет) будет отображаться браузером до того, как вы установите конечное состояние, и переход должен работать.

...