如何实现Angular中*ngIf子组件显隐时父容器宽度平滑动画？

Hey，这个场景我之前折腾过好一阵子，动态宽度的父容器跟着子元素的显示/隐藏做平滑伸缩动画，确实没法直接用固定宽度的CSS transition搞定，不过有几个实用的思路可以试试：

思路1：Angular动画结合动态计算的子元素宽度 #

核心思路是先获取子元素的实际宽度，再让父容器从当前宽度（或0）过渡到这个计算出的宽度，反之亦然。这样能保证动画完全贴合子元素的动态尺寸：

实现步骤： #

1. 用ViewChild获取父容器和子元素的DOM引用
2. 定义一个Angular动画触发器，包含open和closed两个状态，分别对应子元素宽度和0
3. 切换*ngIf状态时，先等待子元素渲染完成，计算其宽度后再触发父容器的动画

代码示例： #

组件类：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  animations: [
    // 父容器宽度动画
    trigger('parentWidth', [
      state('closed', style({ width: '0', overflow: 'hidden' })),
      state('open', style({ width: '{{targetWidth}}px' })),
      transition('closed <=> open', animate('300ms ease-in-out')),
    ], { params: { targetWidth: 0 } }),
    // 子组件原有动画保持不变
    trigger('loadingEnter', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('300ms', style({ opacity: 1 })),
      ]),
    ])
  ]
})
export class ParentComponent {
  myCondition = false;
  parentState = 'closed';
  targetWidth = 0;
  
  @ViewChild('childElement') childElement!: ElementRef;

  toggleCondition() {
    this.myCondition = !this.myCondition;
    
    if (this.myCondition) {
      // 等待DOM渲染完成后计算子元素宽度
      setTimeout(() => {
        this.targetWidth = this.childElement.nativeElement.getBoundingClientRect().width;
        this.parentState = 'open';
      }, 0);
    } else {
      this.parentState = 'closed';
    }
  }
}

模板：

<div class="parent" [@parentWidth]="{ value: parentState, params: { targetWidth: targetWidth } }">
  <div *ngIf="myCondition" #childElement [@loadingEnter]></div>
  <div *ngIf="!myCondition"></div>
</div>
<button (click)="toggleCondition()">切换显示</button>

优缺点：动画精度高，完全匹配子元素动态宽度；缺点是需要处理DOM渲染时机，代码稍多。

思路2：用CSS max-width替代width做过渡 #

这是最简洁的方案，利用max-width的特性：当设置的max-width大于子元素实际宽度时，父容器会自动收缩到子元素的宽度。我们只需要在显示/隐藏时切换max-width的值即可：

实现步骤： #

1. 给父容器设置默认的max-width: 0和过渡动画
2. 定义一个open类，设置足够大的max-width（只要比子元素可能的最大宽度大就行）
3. 切换*ngIf状态时同步切换父容器的open类

代码示例： #

CSS：

.parent {
  transition: max-width 300ms ease-in-out;
  overflow: hidden;
  max-width: 0;
}

.parent.open {
  max-width: 1000px; /* 根据你的子元素最大可能宽度调整 */
}

组件类：

import { Component } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  animations: [
    trigger('loadingEnter', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('300ms', style({ opacity: 1 })),
      ]),
    ])
  ]
})
export class ParentComponent {
  myCondition = false;
}

模板：

<div class="parent" [class.open]="myCondition">
  <div *ngIf="myCondition" [@loadingEnter]></div>
  <div *ngIf="!myCondition"></div>
</div>
<button (click)="myCondition = !myCondition">切换显示</button>

优缺点：代码极简，无需操作DOM；缺点是如果max-width设置过大，动画后期会显得“慢半拍”，需要根据实际场景调整数值。

思路3：用Angular AnimationBuilder动态构建动画 #

如果需要更精细的控制（比如动画中途的进度、回调处理），可以用AnimationBuilder动态创建基于实际宽度的动画：

代码示例： #

组件类：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { AnimationBuilder, animate, style } from '@angular/animations';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  animations: [
    trigger('loadingEnter', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('300ms', style({ opacity: 1 })),
      ]),
    ])
  ]
})
export class ParentComponent {
  myCondition = false;
  
  @ViewChild('parentElement') parentElement!: ElementRef;
  @ViewChild('childElement') childElement!: ElementRef;

  constructor(private animationBuilder: AnimationBuilder) {}

  toggleCondition() {
    const parentEl = this.parentElement.nativeElement;
    
    if (this.myCondition) {
      // 隐藏时：从当前宽度动画到0，结束后再隐藏子元素
      const hideAnimation = this.animationBuilder.build([
        style({ width: parentEl.offsetWidth + 'px' }),
        animate('300ms ease-in-out', style({ width: '0' }))
      ]);
      const player = hideAnimation.create(parentEl);
      player.play();
      player.onDone(() => {
        this.myCondition = false;
      });
    } else {
      // 显示时：先渲染子元素，计算宽度后动画到目标宽度
      this.myCondition = true;
      setTimeout(() => {
        const childWidth = this.childElement.nativeElement.getBoundingClientRect().width;
        const showAnimation = this.animationBuilder.build([
          style({ width: '0' }),
          animate('300ms ease-in-out', style({ width: childWidth + 'px' }))
        ]);
        const player = showAnimation.create(parentEl);
        player.play();
      }, 0);
    }
  }
}

模板：

<div class="parent" #parentElement style="overflow: hidden;">
  <div *ngIf="myCondition" #childElement [@loadingEnter]></div>
  <div *ngIf="!myCondition"></div>
</div>
<button (click)="toggleCondition()">切换显示</button>

优缺点：灵活性拉满，支持自定义动画逻辑和回调；缺点是代码量最大，适合复杂场景。

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