Анимация Angular 1.3 не работает в Firefox

Question

У нас есть директива ng-repeat, которая использует ng-hide для анимации и скрытия на основе выбранного индекса. Анимации работают корректно во всех браузерах, кроме Firefox.

В Firefox анимация для.ng-hide-remove не работает. Вы можете видеть, как он немного двигается и останавливается. Я использую Firefox версии 33.0, но я попробовал и с 32.0.

Эта проблема возникает только с Angular 1.3, тот же код работает в Firefox, используя Angular версии 1.2.

Вот код повторения

 <div class="item" ng-repeat="item in items" ng-show="$index == selectedItem" >
  Item: {{item}}
</div>

Вот стили CSS:

.item {
  position:absolute;
  top:50px;
  left:200px;
  border:solid 1px black;
  padding:10px;
  background-color:#f5f5f5;
  width:100px;
}

.item.ng-hide-add {
  -webkit-animation: fadeInLeft 1.5s;
  animation: fadeInLeft 1.5s; 
}

.item.ng-hide-remove {
  -webkit-animation: fadeOutRight 1.5s;
  animation: fadeOutRight 1.5s; 
}

Вот плункер, содержащий полную демо-версию: http://plnkr.co/edit/UFI6eWqfnDcCkpIe6d1i?p=preview

Любая помощь приветствуется. Я делаю что-то не так или это настоящая ошибка, с которой я сталкиваюсь? Спасибо!

Answer 1

  .item.ng-hide-remove.ng-hide-remove-active

от https://docs.angularjs.org/api/ngAnimate/service/$ animate

Шаг анимации Как выглядит атрибут класса элемента

1. $animate.animate(...) называется class="my-animation"

2. $ animate ожидает следующего дайджеста для запуска класса анимации = "my-animation ng-animate"

3. $ animate запускает определенные в JavaScript анимации, обнаруженные в элементе class="my-animation ng-animate"

4. значение класса className добавляется к элементу class = "my-animation ng-animate className"

5. $ animate сканирует стили элемента, чтобы получить длительность перехода CSS / анимации и задержку class = "my-animation ng-animate className"

6. $ animate блокирует все CSS-переходы в элементе, чтобы обеспечить немедленное применение стиля класса.className. class = "my-animation ng-animate className"

7. $ animate применяет предоставленную коллекцию стилей CSS к элементу class = "my-animation ng-animate className"

8. $ animate ожидает один кадр анимации (выполняется перекомпоновка). class = "my-animation ng-animate className"

9. $ animate удаляет блок перехода CSS, помещенный в элемент class = "my-animation ng-animate className"

10. добавлен класс className-active (запускается переход CSS / анимация) class="my-animation ng-animate className className-active"

11. $ animate применяет коллекцию к стилям CSS к элементу, который затем обрабатывается переходом class = "my-animation ng-animate className className-active"

12. $ animate ожидает завершения анимации (через события и время ожидания) class="my-animation ng-animate className className-active"

13. Анимация заканчивается, и все сгенерированные CSS-классы удаляются из элемента class="my-animation"

14. Возвращенное обещание разрешено. класс = "моя-анимация"