Angular7路由器出口动画歪斜并重新排列所有元素造成混乱

Question

我一直在尝试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;
    }

Answer 1

我发现：输入和：将事件靠近路由会导致角度动画出现几个问题。这个答案不适用于您的情况，可能需要进行调整，因为以下代码段取决于您的应用程序结构和嵌套路由器。如果它不适合或解决你的问题我会适应这个答案！

关于this Github问题当父路线改变时，子路线立即消失而不播放动画。

以下评论解决了我的问题，但我必须根据我的环境进行调整：

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 ~ *

我希望这个答案可以帮到你:)