对于这个问题，我们需要使用Angular提供的动画状态和触发器，以便在状态发生变化时执行动画。这个解决方案涉及到以下步骤：

1. 定义变化状态（从未变化到变化后的状态）

在组件的简单模板中，添加一个类来表示变化后的状态。在下面的示例中，我们为高度变化定义了两个状态：“expanded”和“collapsed”。要在模板中使用这些状态，我们需要使用动画元数据枚举animate，设置“从原始状态到目标状态的样式”和“过渡时间”。

  





animations: [
  trigger('expandAnimation', [
    state('collapsed', style({
      height: '0px',
      opacity: 0
    })),
    state('expanded', style({
      height: '*',
      opacity: 1
    })),
    transition('collapsed <=> expanded', animate('500ms ease-in-out'))
  ])
]

2. 监测高度的变化

为了在高度发生变化时触发动画，我们需要监测容器元素高度的变化。为此，我们需要使用Angular的Renderer2服务，对DOM进行相应的操作。在组件的构造函数中，将Renderer2服务注入到组件中，在ngAfterViewInit钩子中，使用它来监测容器元素高度的变化。

constructor(private renderer: Renderer2, private elementRef: ElementRef) {}

ngAfterViewInit() {
  this.renderer.setStyle(this.elementRef.nativeElement, 'height', this.expanded ? 'auto' : '0');
  this.height = this.elementRef.nativeElement.scrollHeight + 'px';
  this.renderer.setStyle(this.element