Angular 6 条路线转换未从 Edge/IE 中的视图中删除之前的路线

Question

我已按照此 article 将转换添加到我的路由器。

这在使用 Angular 5 时一切正常，但是在我将项目升级为使用 Angular 6 之后，我在 Edge 和 IE 中遇到了奇怪的行为。当路由更改触发转换时，新路由会滑入，但之前的路由会保留在 UI 中呈现。我包含了所有的 polyfill，它在 chrome 中运行良好。我错过了什么？

这是我的路由器动画

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}),
  ])
]);

Answer 1

工作动画。没有时间进行并排比较以了解为什么这个有效而另一个无效但这是代码：

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}),
    ])
  ])
]);

另一件需要注意的事情是我升级到 angular 6.0.3 并启用了所有的 polyfills。

Angular 6 条路线转换未从 Edge/IE 中的视图中删除之前的路线

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

angular

angular-animations

angular6