Reputation: 69
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
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
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