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

我发现靠近路由的：enter和：leave事件会导致角度动画出现多个问题。这个答案不是针对您的情况的证明，可能需要修改，因为以下代码段取决于您的应用程序结构和嵌套路由器。如果不合适或无法解决您的问题，我会改编！

关于this的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 ~ *

我希望这个答案可以对您有所帮助：）

Angular7路由器插座动画偏斜并重新排列所有元素，使情况一团糟

1 个答案: