1

我已按照本文向我的路由器添加过渡。

这在使用 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}),
  ])
]);
4

1 回答 1

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。

于 2018-06-07T11:08:03.380 回答