CODEWITHSUNDEEP
angularangular-animationsangular6
Steve Fitzsimons
Steve Fitzsimons

Reputation: 3904

Angular 6 route transitions not removing previous route from view in Edge/IE

I have followed this article to add transitions to my router.

This all works fine in using Angular 5 but after I upgraded the project to use Angular 6 I have encountered weird behaviour in Edge and IE. When the transition is triggered on route change then the new route slides in but the previous route stays rendered in the UI. I have all the polyfills included and it works fine in chrome. What am i missing?

This is my router animation 

import {
  trigger,
  style,
  animate,
  transition,
  query,
} from '@angular/animations';

export const RouterAnimation = trigger('routerAnimation', [
  transition('* <=> *', [
    // Initial state of new route
    query(':enter',
      style({
        position: 'fixed',
        width: '100%',
        transform: 'translateX(100%)'
      }),
      {optional: true}),
    // move page off screen right on leave
    query(':leave',
      animate('500ms ease',
        style({
          position: 'fixed',
          width: '100%',
          transform: 'translateX(-100%)'
        })
      ),
      {optional: true}),
    // move page in screen from left to right
    query(':enter',
      animate('500ms ease',
        style({
          opacity: 1,
          transform: 'translateX(0%)'
        })
      ),
      {optional: true}),
  ])
]);

Upvotes: 1

Views: 1018

Answers (1)

Steve Fitzsimons
Steve Fitzsimons

Reputation: 3904

Working animations. Haven't had time to do a side by side comparison to see why this works and the other doesn't but here's the code:

import {sequence, trigger, stagger, animate, style, group, query, transition, animateChild} from '@angular/animations';

export const RouterAnimation = trigger('routerAnimation', [
  transition('* => *', [
    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), {optional: true}),
    query(':enter', style({ transform: 'translateX(100%)' }), {optional: true}),
    sequence([
      query(':leave', animateChild(), {optional: true}),
      group([
        query(':leave', [
          style({ transform: 'translateX(0%)' }),
          animate('500ms ease', style({ transform: 'translateX(-100%)' }))
        ], {optional: true}),
        query(':enter', [
          style({ transform: 'translateX(100%)' }),
          animate('500ms ease',
            style({ transform: 'translateX(0%)' })),
        ], {optional: true}),
      ]),
      query(':enter', animateChild(), {optional: true}),
    ])
  ])
]);

One other thing to note is I upgraded to angular 6.0.3 and enabled all the polyfills.

Upvotes: 1

Related Questions