Угловые 6 маршрутных переходов, не удаляющих предыдущий маршрут из вида в Edge/IE - angular


1

Я выполнил эту статью, чтобы добавить переходы на мой маршрутизатор.

Все это прекрасно работает с использованием Angular 5, но после того, как я обновил проект для использования Angular 6, я столкнулся с странным поведением в Edge и IE. Когда переход инициируется при изменении маршрута, новый маршрут продвигается, но предыдущий маршрут остается в пользовательском интерфейсе. У меня есть все полиполки, и он отлично работает в хроме. Что мне не хватает?

Это моя анимация маршрутизатора

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}),
  ])
]);
Источник
  •  43
  •  1
  • 4 мар 2020 2020-03-04 05:30:19

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

Еще одна вещь, которую я должен отметить, - я обновил до углового 6.0.3 и включил все полиполки.