角度 6 路由转换不会从 Edge/IE 中的视图中删除以前的路由

Question

我已经按照这篇文章为我的路由器添加了转换。

这一切都在使用 Angular 5 时工作正常，但在我将项目升级为 Angular 6 后，我在 Edge 和 IE 中遇到了奇怪的行为。当在路由更改时触发转换时，新路由将滑入，但以前的路由仍保留在 UI 中呈现。我包含所有填充物，并且在铬中工作正常。我错过了什么？

这是我的路由器动画

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 并启用了所有 polyfill。