Я недавно начал использовать версию разработчика Firefox, и я обнаружил странное поведение при анимации с задержкой.Анимация с задержкой в версии для разработчиков firefox странное поведение
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 удаляет свои классы после окончания анимации. Я приурочил его, и удаление класса задерживается ровно на половину продолжительности анимации (если вы увеличиваете продолжительность анимации, соответственно увеличивается задержка), так что анимация заканчивается, а остальные свойства, добавленные классом (например, непрозрачность), остаются пока классы не будут удалены. Это происходит для любого значения задержки, независимо от установленного значения, если есть задержка в анимации, это сделает это. Удивительно, что это произойдет, даже если есть задержка на переходах (но по-прежнему с помощью анимации) либо из transition имущества или от transition-delay собственности
Если я удалить задержку из CSS атрибутов анимации работает отлично.
Я также протестировали с помощью animation-name, animation-duration и animation-delay вместо animation собственности