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:

This is an angular 7 app and it works fine in chrome.
the animation does not work in MS Edge
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

Possible duplicate of [Angular animation not working in IE edge](https://stackoverflow.com/questions/44612735/angular-animation-not-working-in-ie-edge) — Qortex, Jan 16 '19 at 17:52
Not a duplicate, the answer in that question was to add polyfill, which I have already done — J King, Jan 16 '19 at 18:13

score 1 · Answer 1 · answered Jan 17 '19 at 09:16

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.

thanks Zhi, your answer helped me to debug my solution but the final fix was a css issue with he wrapping div of my components — J King, Jan 17 '19 at 18:29
Glad to hear you have solved the problem by yourself, cheers. — Zhi Lv, Jan 18 '19 at 01:44

score 0 · Accepted Answer · answered Jan 17 '19 at 18:31

Unfortunately, this was a simple CSS problem.

All of the components being rendered in the router outlet use a div to wrap the component. I needed to add the following:

position: fixed;

After this, the animations work. So it was not an angular animation issue but rather a CSS issue.

Hope this helps someone else

Transition animation in angular app does not work in EDGE

Why this is not a duplicate question

2 Answers2

Linked