Анимация маршрутизатора-выхода Angular7 искажает и переставляет все элементы, создавая беспорядок - PullRequest
Новая
       65

Анимация маршрутизатора-выхода Angular7 искажает и переставляет все элементы, создавая беспорядок

3 голосов
/ 20 марта 2019

Я пробовал около 5 реализаций анимации роутер-аутлет.Я просто хочу базовую анимацию постепенного появления / исчезновения, когда маршрут меняется, ничего особенного.

Вот экранная запись того, как все выглядит, когда я переключаю маршрут: https://streamable.com/tbkxt

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

У меня включена навигация по sidenav, и мой код выглядит следующим образом: 

<mat-sidenav-content [@routerTransition]="getPageTransition(routerOutlet)">
      <button
        @menu-button
        *ngIf="!snav.opened"
        mat-button
        (click)="snav.toggle()"
        class="navigation-toggle"
      >
        <fa-icon icon="bars"></fa-icon>
      </button>

      <button
        @menu-button
        *ngIf="snav.opened"
        mat-button
        (click)="snav.toggle()"
        class="navigation-toggle"
      >
        <fa-icon icon="times"></fa-icon>
      </button>
      <router-outlet #routerOutlet="outlet"></router-outlet>
    </mat-sidenav-content>

Мои анимации определены: 

const query = (style, animate, optional = { optional: true }) =>
  q(style, animate, optional);

const fade = [
  query(':enter, :leave', style({ position: 'fixed', width: '100%' })),
  query(':enter', [style({ opacity: 0 })]),
  group([
    query(':leave', [animate('0.3s ease-out', style({ opacity: 0 }))]),
    query(':enter', [
      style({ opacity: 0 }),
      animate('0.3s ease-out', style({ opacity: 1 }))
    ])
  ])
];

export const routerTransition = trigger('routerTransition', [
  transition('void => *', [
    style({ top: '0px', opacity: 0 }),
    animate(2000, style({ top: '0px', opacity: 1 }))
  ]),
  transition('* => void', [
    style({ top: '0px', opacity: 1 }),
    animate(2000, style({ top: '0px', opacity: 0 }))
  ]),
  transition('* => forward', fade),
  transition('* => backward', fade)
]);

И вкомпонент проверяю розетку роутера: 

 getPageTransition(routerOutlet: RouterOutlet) {
    if (routerOutlet.isActivated) {
      let transitionName = 'section';

      const { path } = routerOutlet.activatedRoute.routeConfig;
      const isSame = this.previousPath === path;
      const isBackward = this.previousPath.startsWith(path);
      const isForward = path.startsWith(this.previousPath);

      if (isSame) {
        transitionName = 'none';
      } else if (isBackward && isForward) {
        transitionName = 'initial';
      } else if (isBackward) {
        transitionName = 'backward';
      } else if (isForward) {
        transitionName = 'forward';
      }

      this.previousPath = path;

      return transitionName;
    }

1 Ответ

0 голосов
/ 21 марта 2019

Я понял, что: enter и: оставлять события рядом с маршрутизацией могут вызвать несколько проблем с угловой анимацией. Этот ответ не является тестом для вашего случая и может нуждаться в адаптации, поскольку следующий фрагмент зависит от структуры вашего приложения и вашего вложенного маршрутизатора. Я адаптирую этот ответ, если он не подходит или не решит вашу проблему!

Относительно это Дочерние маршруты Github Issue немедленно исчезают без воспроизведения анимации при изменении родительского маршрута.

Следующий комментарий решил мою проблему, но мне пришлось адаптировать ее для моей среды: 

let animation = [...]; // the metadata
transition('A => B', group([
  query(':self', animation),
  query('router-outlet ~ *', [style({}), animate(1, style({}))], { optional: true })
]))

Это фактически означает, что вы не только оживляете свою стихию. Вы также применяете анимацию к самой роутер-розетке. Это может быть реализовано для вас следующим кодом: 

query('mat-sidenav-content > router-outlet ~ *', [
  style({
  opacity: .99999
}),
animate(yourAnimationDuration, style({
  opacity: 1
}))
], { optional: true });

Я не Css-Selector профессионал, вам может понадобиться адаптировать 

mat-sidenav-content > router-outlet ~ *

Надеюсь, этот ответ поможет вам:)

...