Angular animation not working in IE edge

Question

I added an animation to my component in Angular. However the animation WORKS FINE in Chrome and Firefox, but in IE Edge the animation is NOT triggerd although the styles are applied correctly on state change, but just without specified animation.

Does anyone have the same issue?

Here is my code:

animations: [
    trigger('rowState', [
        state('collapsed', style({
            'height': 0,
            'overflow-y': 'hidden'
        })),
        state('expanded', style({
            'height': '*',
            'overflow-y': 'hidden'
        })),
        transition('collapsed <=> expanded', [animate('1000ms ease-out')])
    ])
]

Thanks in advance

Answer 1

you need to add polyfill in polyfills.ts

remove comments from

import web-animations-js;

then run

npm install --save web-animations-js

Answer 2

Web animation is not supported in edge, you should add the polyfill

Angular animations are built on top of the standard Web Animations API and run natively on browsers that support it. For other browsers, a polyfill is required. Grab web-animations.min.js from GitHub and add it to your page.