Angular 路由器出口内容扩展的角度幻灯片动画

我已经成功地实现了一个

SlideUpDown

-动画，它允许在路由器出口内动态地上下滑动添加的内容。我正在使用

max height

来实现这一点

如果我单击一个

routerLink

，内容会向下滑动并可见，如果我再次单击同一链接，内容会向上滑动。但假设我单击

链接A

，这会在

路由器出口

内呈现

组件A

的内容，然后我单击

链接B

，不会触发进一步的动画，但是

路由器出口

周围的包装容器的高度会立即修改。这很明显，因为我使用了

max height

属性

我修改了动画并添加了第三种状态，

“add_in”

，当包装器已经向下滑动时会触发该状态。我还试图获得包装的高度，但同样明显的是，高度还没有正确计算，因为这个

div

还没有得到它的最终高度（这太棒了，因为我可以将动画放在组件文件中，并使用属性绑定，并在

max height

属性中设置它）

我如何实现这种行为？假设

组件A

在

路由器出口中以200px的高度渲染，然后我单击
链接B
，这将触发高度为500px的
组件B
的渲染，我想将200px修改为500px

这是我当前的代码：

slide.animation.ts

export const SlideInOutAnimation = [
    trigger('slideInOut', [
        state('in', style({
            'max-height': '800px', visibility: 'visible'
        })),
        state('out', style({
            'max-height': '0px', visibility: 'hidden'
        })),
        state('add_in', style({
            'max-height': '800px', visibility: 'visible'
        })),
        transition('* => out', [group([
            animate('600ms ease-out', style({
                'max-height': '0px'
            })),
            animate('600ms ease-out', style({
                visibility: 'hidden'
            }))
        ]
        )]),
        transition('out => in', [group([
            animate('1ms ease-out', style({
                visibility: 'visible'
            })),
            animate('600ms ease-out', style({
                'max-height': '800px'
            }))
          ])
        ]),
        transition('in => add_in', [group([
            animate('1ms ease-out', style({
                visibility: 'visible'
            })),
            animate('600ms ease-out', style({
                'max-height': '800px'
            }))
          ])
        ])
      ])
  ];

@Component({
  selector: 'app-bubble-nav',
  // ...
})
export class BubbleNavComponent {
  // ...
  @Output() menuClicked = new EventEmitter();
  // ...
  onClickMenuItem(event: any) {
    this.menuClicked.emit(event);
  }
}

export class AppComponent implements OnInit {
  // ...
  animationState = 'in';
  currentBubble = '';

  // ...

  onMenuItemClicked(elementName) {

    if (this.currentBubble === elementName) {
        this.animationState = this.animationState === 'out' ? 'in' : 'out';
    } else {
      switch (this.animationState) {
        case 'in':
          this.animationState = 'add_in';
          break;
        case 'out':
          this.animationState = 'in';
          break;
      }
    }

    this.currentBubble = elementName;
  }
}

气泡导航组件.html

<a class="bubble-nav-item" [routerLink]="['/bubbles/bubble01']" (click)="onClickMenuItem('bubble01')">
      <img src="assets/bubble-nav-icons/awb3.png" />
      <div class="title-wrapper">
        <p>{{ titleBubbleCommunication }}</p>
      </div>
    </a>
<a class="bubble-nav-item" [routerLink]="['/bubbles/bubble02']" (click)="onClickMenuItem('bubble02')">
      <img src="assets/bubble-nav-icons/awb4.png" />
      <div class="title-wrapper">
        <p>{{ titleBubbleCommunication }}</p>
      </div>
    </a>
// (...)

<app-bubble-nav (menuClicked)="onMenuItemClicked($event)></app-bubble-nav>

<div class="expandable-content" [@slideInOut]="animationState">
  <router-outlet></router-outlet>
</div>

app.component.html

<a class="bubble-nav-item" [routerLink]="['/bubbles/bubble01']" (click)="onClickMenuItem('bubble01')">
      <img src="assets/bubble-nav-icons/awb3.png" />
      <div class="title-wrapper">
        <p>{{ titleBubbleCommunication }}</p>
      </div>
    </a>
<a class="bubble-nav-item" [routerLink]="['/bubbles/bubble02']" (click)="onClickMenuItem('bubble02')">
      <img src="assets/bubble-nav-icons/awb4.png" />
      <div class="title-wrapper">
        <p>{{ titleBubbleCommunication }}</p>
      </div>
    </a>
// (...)

<app-bubble-nav (menuClicked)="onMenuItemClicked($event)></app-bubble-nav>

<div class="expandable-content" [@slideInOut]="animationState">
  <router-outlet></router-outlet>
</div>

如何更改转换
'in=>add_in'
以实现此行为