Rahul B
Rahul B

Reputation: 69

Angular animation doesn't work in Firefox

I am using the below code to gradually hide a DIV in Angular 2. This perfectly works in Chrome and Microsoft Edge. But the same thing doesn't work in Firefox and DIV stays visible. Do I need to add or edit anything to make this work in Firefox.

  animations: [
  trigger('toggleDiv', [
  state('false', style({})),
  state('true', style({ maxHeight: 0, padding: 0, display: 'none', 
  overflow: 'hidden' })),
  transition('* => *', animate('300ms ease')),
  ])
 ]
 })

Upvotes: 1

Views: 1631

Answers (2)

Sebastian Giro
Sebastian Giro

Reputation: 728

The exact problem is with padding: 0, remove it and the animation will close and work again in firefox. I don't know the exact details of this behaviour, but it seems firefox and angular animations don't work really well with some styles (in this case, padding).

A workaround to keep padding at 0, is using

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

Upvotes: 4

Aaron Leon
Aaron Leon

Reputation: 116

According to the docs, pre-6.0 requires a polyfill for browsers that don't natively support the web animation API. To add the polyfill, install web-animations-js and add the following to polyfills.js

require('web-animations-js');

Upvotes: 0

Related Questions