Question

我已按照此article向路由器添加转换。

这一切都可以正常使用Angular 5，但在我升级项目以使用Angular 6后，我在Edge和IE中遇到了奇怪的行为。在路线更改时触发转换时，新路线会滑入，但之前的路线会在UI中保留。我已经包含了所有的polyfills，它在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}),
    ])
  ])
]);

另外需要注意的是我升级到角度6.0.3并启用了所有的polyfill。

Angular 6路由转换不会从Edge / IE中的视图中删除先前路由

1 个答案: