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

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

0 голосов
/ 09 мая 2018

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

Все это прекрасно работает при использовании Angular 5, но после того, как я обновил проект для использования Angular 6, я столкнулся со странным поведением в Edge и IE. Когда переход инициируется при изменении маршрута, новый маршрут добавляется, но предыдущий маршрут остается визуализированным в пользовательском интерфейсе. У меня есть все 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}),
  ])
]);

1 Ответ

0 голосов
/ 07 июня 2018

Рабочие анимации. У нас не было времени провести параллельное сравнение, чтобы понять, почему это работает, а у другого нет, но вот код: 

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 и включил все полифилы.

...