如何使用Angular Animation实现自动高度过渡动画？

你遇到的问题核心在于：Angular动画中使用height: '*'时，若两个状态的高度都是通配符，动画系统无法计算出明确的差值（因为auto是浏览器动态计算的，没有固定数值），所以不会触发过渡效果。

解决思路 #

要实现动态内容的高度动画，需要先获取元素的实际内容高度，再将这个具体数值作为动画的目标值，让Angular能计算出过渡差值。

具体实现步骤 #

1. 调整动画触发器定义

替换原来的openClose3触发器，改用带参数的动画来动态传递高度值：

import { trigger, state, style, animate, transition, query, animateChild } from '@angular/animations';

@Component({
  // 组件元数据（selector、templateUrl等）
  animations: [
    // 保留你原来的左右平移动画
    trigger('openClose', [
      state('open', style({ opacity: 1 })),
      state('closed', style({ opacity: 0, transform: 'translateX(-100%)' })),
      transition('open<=>closed', animate('.3s ease'))
    ]),
    trigger('openClose2', [
      state('open', style({ opacity: 1 })),
      state('closed', style({ opacity: 0, transform: 'translateX(100%)' })),
      transition('open<=>closed', animate('.3s ease'))
    ]),
    // 新的高度动画触发器
    trigger('heightAnimation', [
      state('collapsed', style({ height: '0', overflow: 'hidden' })),
      state('expanded', style({ height: '{{targetHeight}}px', overflow: 'hidden' })),
      // 同步子元素的平移动画
      transition('collapsed => expanded', [
        query('@openClose2', animateChild()),
        animate('0.3s ease')
      ]),
      transition('expanded => collapsed', [
        query('@openClose', animateChild()),
        animate('0.3s ease')
      ])
    ], { params: { targetHeight: 0 } }) // 默认参数
  ]
})

2. 组件类中处理高度计算

通过ViewChild获取目标元素，在内容变化时获取实际高度并触发动画：

import { Component, ElementRef, ViewChild, AfterViewChecked } from '@angular/core';

export class YourComponent implements AfterViewChecked {
  @ViewChild('dynamicContent') dynamicContent!: ElementRef;
  // 动画状态：collapsed（收起）/ expanded（展开）
  heightState = 'collapsed';
  // 动态高度值
  targetHeight = 0;

  // 示例：手动触发内容更新的方法
  updateDynamicContent(newContent: string) {
    // 先切换到收起状态，等待DOM更新
    this.heightState = 'collapsed';
    // 用setTimeout确保DOM渲染完成后获取高度
    setTimeout(() => {
      this.targetHeight = this.dynamicContent.nativeElement.scrollHeight;
      this.heightState = 'expanded';
    }, 0);
  }

  // 自动监听内容变化（比如数据绑定更新）
  ngAfterViewChecked() {
    const currentHeight = this.dynamicContent.nativeElement.scrollHeight;
    // 只有高度变化且当前是展开状态时，重新触发动画
    if (currentHeight !== this.targetHeight && this.heightState === 'expanded') {
      this.targetHeight = currentHeight;
      // 先切换到收起再切回展开，触发过渡动画
      this.heightState = 'collapsed';
      setTimeout(() => {
        this.heightState = 'expanded';
      }, 0);
    }
  }
}

3. 模板中绑定动画

将动画绑定到目标div，并传递高度参数：

<div 
  #dynamicContent 
  [@heightAnimation]="{ value: heightState, params: { targetHeight: targetHeight } }"
>
  <!-- 你的动态内容 -->
  <div [@openClose]="heightState">左侧内容</div>
  <div [@openClose2]="heightState">右侧内容</div>
  {{ dynamicData }}
</div>

关键说明 #

• scrollHeight：用于获取元素包含所有内容的实际高度（包括超出可视区域的部分），比offsetHeight更准确。
• overflow: hidden：避免动画过程中内容溢出，保证过渡效果的完整性。
• 状态切换时机：必须等待DOM更新完成后再获取高度，所以用setTimeout或AfterViewChecked确保元素渲染完毕。

内容的提问来源于stack exchange，提问作者Nikunj Guna