Angular7 路由器插座动画歪斜并重新排列所有元素，弄得一团糟答案

【问题标题】：Angular7 router-outlet animations skews and rearranges all elements making a messAngular7 路由器插座动画歪斜并重新排列所有元素，弄得一团糟
【发布时间】：2019-03-21 20:44:25
【问题描述】：

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

【问题讨论】：

嗨 Sebastian，我过去在路由器动画方面也有过不好的经历。一个总是重复的错误与以下内容有关：github.com/angular/angular/issues/15477。有几种解决方案，它可能会对您有所帮助。据我了解，您需要通过将路由器的不透明度从 0.99999 设置为 1 来保持组件，以保持整个内容，因此动画保持活动状态，直到组件可以被丢弃。
@JonathanStellwag 谢谢——我不是 100% 确定我理解你的意思，将路由器从 0.99999 设置为 1 ——你的意思是在输入时我应该从 0.99999 而不是 0 开始？那不是让整个事情都可见吗？或将其从 0 设置为 0.99999 的动画 - 看看 0.99999 到 1 的想法，它很可能只是眨眼间消失而没有实际的褪色，但我认为我误解了。谢谢！
嗨@SebastianG。我会给你写一个可能需要适应你的情况的答案，和/或你必须尝试和错误一点。但是注释部分的代码不好:)

标签： angular css-animations angular7 angular-router angular-animations

【解决方案1】：

我发现 :enter 和 :leave 事件接近路由可能会导致角度动画出现一些问题。此答案不适用于您的情况，可能需要进行调整，因为以下 sn-p 取决于您的应用程序结构和嵌套路由器。如果它不适合或解决您的问题，我会调整此答案！

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

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

【讨论】：