我已经成功实现了slideupDown-Animation，该动画可以在路由器插座内动态上下滑动添加的内容。我正在使用max-height来实现这一目标。

如果单击routerLink，则内容将向下滑动，并且可见；如果再次单击同一链接，则内容将向上滑动。但是，假设我单击link A，这将在Component A内呈现router-outlet的内容，然后单击link B，则不会触发进一步的动画，但是会触发包装容器的高度router-outlet周围的内容会立即被修改。这很明显，因为我使用了max-height属性。

我更改了动画，并添加了第三状态'add_in'，该状态在包装器已经向下滑动时触发。我还尝试获取包装器的高度，但是显然，还没有计算出高度，因为这个div尚未达到他的最终高度（这太棒了，因为我可以将动画放到里面组件文件，并使用对属性的绑定，然后在max-height属性中进行设置。

如何实现这种行为？假设Component A是在router-outlet中以200px的高度渲染的，然后单击Link B会触发{500}高度为Component 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',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'
            })),style({
                'max-height': '800px'
            }))
          ])
        ]),transition('in => add_in',style({
                'max-height': '800px'
            }))
          ])
        ])
      ])
  ];

bubble-nav.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>
// (...)

bubble-nav.component.ts

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

app.component.html

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

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

app.component.ts

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

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