Angular 5+ animate flex не работает в Firefox

Question

Я довольно новичок в системе анимации Angular, и мне удалось создать красивую и плавную анимацию, которая прекрасно работает в Chrome, но не в Firefox, и генерирует досадную ошибку, которая не обновляет вид.

Когда вы убираете ширину, сгиб и отступы из карты, запускается анимация, возможно, есть лучший способ добиться этого. Мне нужна эта анимация для массива, который может добавлять и удалять элементы из него.

Смотрите стек здесь: https://stackblitz.com/edit/angular-flex-animate-firefox

С уважением.

Answer 1

Существует проблема с Firefox и API веб-анимации при использовании сокращенных ссылок CSS, например margin, padding, border-width, flex и т. Д. Firefox по какой-то причине не может вычислить стиль этих сокращений и, следовательно, не может анимировать.

Решение заключается в расширении всех сокращений css, используемых анимацией, например,

padding: 0;

должно быть

padding-top: 0;
padding-right: 0
padding-bottom: 0;
padding-left: 0;

Так что при развертывании сокращений padding и flex в вашей анимации это прекрасно работает в Firefox.

Смотрите ваш код, работающий здесь: https://stackblitz.com/edit/angular-flex-animate-firefox-svrwtp

Источник: https://github.com/angular/angular/issues/10420

Answer 2

Если ваш код использует AnimationBuilder, раскомментируйте полифилл web-animations-js из файла polyfills.ts, созданного Angular CLI.