css - Transition animation in angular app does not work in EDGE

Question

I have a simple animation that is used when the app navigates via router to a different component.

export function routerNavigation() {
  return trigger('routerNavigation', [
    state('void', style({ position: 'fixed' })),
    state('*', style({ position: 'fixed' })),
    transition(':enter', [
      style({ transform: 'translateY(200%)' }),
      animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
    ]),
    transition(':leave', [
      style({ transform: 'translateX(0%)' }),
      animate('0.5s ease-in-out', style({ transform: 'translateX(150%)' }))
    ])
  ]);
}

and the animation is added to the component like so:

@Component({
  selector: 'app-branch',
  templateUrl: './branch.component.html',
  styleUrls: ['./branch.component.scss'],
  animations: [routerNavigation()],
  host: { '[@routerNavigation]': '' }
})

I have already run:

npm install --save web-animations-js`

and I have uncommented the lines in the pollyfil.js file:

import 'web-animations-js'; 

Notes:

1. This is an angular 7 app and it works fine in chrome.
2. the animation does not work in MS Edge
3. the component is never added to the DOM but the services in the components.ts file are executed

I have a feeling that this has to do with the transform: 'translateY(200%)' style for the animation but I am unsure how to debug this.

Can someone help me figure out why my animations don't work in MS Edge.

Why this is not a duplicate question

All the other similar questions on SO have added the polyfill for web animations as the solution. I have already done that and it still does not work.

Thanks in advance

Answer 1

Please refer to this article (it contains some demo, I have tested it in angular 7 and on IE, Edge and Chrome browsers, they all works well), I suggest you could try to use the following code to use the animation:

import {trigger, stagger, animate, style, group, query as q, transition, keyframes} from '@angular/animations';
const query = (s,a,o={optional:true})=>q(s,a,o);

export const branchTransition = trigger('branchTransition', [
  transition(':enter', [
    query('.block', style({ opacity: 0 })),
    query('.block', stagger(300, [
      style({ transform: 'translateY(100px)' }),
      animate('1s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(0px)', opacity: 1})),
    ])),
  ]),
  transition(':leave', [
    query('.block', stagger(300, [
      style({ transform: 'translateY(0px)', opacity: 1 }),
      animate('1s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(100px)', opacity: 0})),
    ])),        
  ])
]);

@Component({
  selector: 'app-branch',
  templateUrl: './branch.component.html',
  styleUrls: ['./branch.component.css'],
  animations: [branchTransition],
  host: { '[@branchTransition]': '' }
})

Besides, you could also check the official document to use Route transition animations.