Angular7路由器出口动画扭曲和重新排列所有元素，造成混乱

我已经尝试了5种路由器出口动画的实现。我只想要一个基本的淡入/淡出动画，当路线改变时，没有什么特别的

下面是我切换路线时的屏幕记录：

这是迄今为止我得到的最好的结果，在其他情况下，我只是让按钮/文本一个接一个地从屏幕上消失。我正在测试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>

在组件中，我检查路由器出口：

 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;
    }

---

我发现：enter和：leave事件靠近路由可能会导致角度动画出现一些问题。这个答案不适合您的情况，可能需要修改，因为下面的代码段取决于您的应用程序结构和嵌套路由器。如果这个答案不适合你或者不能解决你的问题，我会修改它

关于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选择器，你可能需要调整

mat-sidenav-content > router-outlet ~ *

---

我希望这个答案能帮助你：）

嗨，塞巴斯蒂安，我过去在路由器动画方面也有过不好的经历。一个总是重复的错误与以下内容有关：。有几种解决方案，它可能会对您有所帮助。据我所知，您需要通过将路由器的不透明度从0.9999设置为1来保持组件，以保持整个内容，从而使动画保持活动状态，直到组件可以被扔掉。@JonathanStellwag谢谢您--我不能100%肯定我理解您将路由器的不透明度从0.9999设置为1的意思--您是说在条目I上应该从0.99999开始，而不是从0开始？这难道不能让整个事情都看得见吗？或者从0到0.99999设置动画——看看0.99999到1的想法，它很可能会在瞬间消失，没有实际的褪色，但我想我是误解了。谢谢嗨，塞巴斯蒂安。我会给你写一个可能需要根据你的情况进行调整的答案，和/或你必须尝试并犯一点错误。但是注释部分的代码不好：）

mat-sidenav-content > router-outlet ~ *