Анимация с задержкой в ​​Firefox Developer Edition странное поведение

Недавно я начал использовать Firefox Developer Edition и обнаружил странное поведение анимации с задержкой.

http://plnkr.co/edit/Tr1nd5r0gAyy3eH3Z7Zh?p=preview

.selection-buttons.ng-animate.ng-hide-add {
  animation: 30s linear 1s fadeOutDown;
  opacity: 1;
}

.selection-buttons.ng-animate.ng-hide-remove {
  animation: 30s linear 1s fadeInUp;
  opacity: 0;
}

Если вы откроете этот Plunker в Firefox Developer, анимация будет воспроизводиться правильно, но затем текст будет скрываться снова в течение пары секунд, а затем возвращаться (или будет отображаться снова в течение пары секунд, а затем исчезнет, ​​когда вы нажмете второй раз). Я проверял это в других браузерах (Chrome, Firefox, Safari и Pale Moon), и анимация работает отлично.

Анимации реализуются с использованием animate.css, в котором я использовал имена анимаций в CSS, чтобы использовать их вместе с ng-animate от angular, но я не тестировал нормальные анимации без ng-animate

Я заметил, что ng-animate удаляет классы после завершения анимации. Я рассчитал время, и удаление класса задерживается ровно на половину продолжительности анимации (если вы увеличите продолжительность анимации, соответственно увеличится задержка), так что анимация заканчивается, но другие свойства, добавленные классом (такие как непрозрачность), остаются пока классы не будут удалены. Это происходит для любого значения задержки, независимо от установленного значения, до тех пор, пока на анимации будет задержка, она это сделает. Удивительно, но это произойдет, даже если есть задержка на переходы (но все еще с использованием анимации) либо из transition собственность или из transition-delay имущество

Если я уберу задержку из атрибута CSS, анимация будет работать нормально.

Я также проверил, используя animation-name, animation-duration а также animation-delay вместо animation имущество

Источник

1 ответ

Решение

Я открыл тикет на bugzilla, и это было подтверждено как ошибка, введенная новой функцией (метки времени hiRes dom), заменяющей текущие метки времени в версиях Firefox, начиная с 44, и версий Chrome, начиная с 49. В редакции Firefox Developer используются экспериментальные сборки, в то время как стандарт Firefox содержит только стабильные сборки (последняя стабильная версия в настоящее время составляет 42, что не затронуто, как и версия 43).

https://bugzilla.mozilla.org/show_bug.cgi?id=1231619

Команда Angular была уведомлена об этой ошибке

Источник
Другие вопросы по тегам