-1

I'm pretty new to Angular animation system and I've manage to make a nice and fluid animation that works just fine on Chrome, but doesn't on Firefox and generate an anoying bug that doesn't refresh the view.

When you remove the width, flex and padding from the cardAnimation it triggers, maybe there is a better way to achieve this. I need this animation on an array that can add and remove items from it.

See stack here: https://stackblitz.com/edit/angular-flex-animate-firefox

Regards.

Dioude
  • 33
  • 4

2 Answers2

2

There is an issue with Firefox and the web animations api when using css shorthands, e.g. margin, padding, border-width, flex etc. Firefox cannot compute the style of these shorthands for some reason, and following, can't animate.

The solution is to expand all the css shorthands used by the animation, e.g.

padding: 0;

should be

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

So when expanding the shorthands padding and flex in your animation it works nicely in firefox.

See your code working here: https://stackblitz.com/edit/angular-flex-animate-firefox-svrwtp

Source: https://github.com/angular/angular/issues/10420

abekonge
  • 116
  • 6
0

If your code does use AnimationBuilder, then uncomment the web-animations-js polyfill from the polyfills.ts file generated by Angular CLI.

umesh kumar
  • 37
  • 5
  • I've already tried to add the web-animation but it doesn't change anything. You can check and try it on my stackblitz – Dioude May 09 '18 at 13:28