11

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

Haris
  • 133
  • 1
  • 5

2 Answers2

7

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.

Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149
  • 3
    if you are using angular-cli the polyfills are baked into the config, you just have to enable them by uncommenting them. "polyfills.ts" – Zuriel Nov 16 '17 at 16:37
  • 2
    This is no longer true for newer versions of Angular. This only needs to be done if you are using `AnimationBuilder` in your app. – Chris Barr May 17 '19 at 19:11
6

you need to add polyfill in polyfills.ts

remove comments from

import web-animations-js;

then run

npm install --save web-animations-js
Dulanga Heshan
  • 1,335
  • 1
  • 19
  • 36