Angular滑动切换组件出现间隙问题求助

我的Angular滑动切换组件运行时，Component1与Component2切换过程中会露出黄色背景间隙（效果如下GIF所示），需要实现无间隙切换，无法定位问题根源，请求指出问题所在。

Component1和Component2的HTML&SCSS代码 #

<div class="container">
  COMPONENT 
</div>

组件切换容器的HTML&SCSS代码 #

<div class="container" [@slideAnimation]="swap_state">
  <app-component1 (click)="swap()"  *ngIf="swap_state === 'show_component1'"></app-component1>
  <app-component2 (click)="swap()" *ngIf="swap_state === 'show_component2'"></app-component2>
</div>

.container{
  display: flex;
  flex-direction: row;
  background: yellow;
  width: 100%;
  height: 100px;
  //padding: 10px;
  overflow: hidden;
}

app-component1{
  flex-shrink: 0;
  flex-grow: 1
}

app-component2{
  flex-shrink: 0;
  flex-grow: 1;
}

Angular动画代码 #

export const horizontal_component_swap_animation =

  trigger('slideAnimation', [
  transition('show_component1 => show_component2', [
    group([
      // Animate component1 sliding out to the left
      query('app-component1', [
        animate('300ms linear', style({ transform: 'translateX(-100%)' }))
      ]),
      // Animate component2 sliding in from the right
      query('app-component2', [
        style({ transform: 'translateX(100%)' }),
        animate('300ms linear', style({ transform: 'translateX(0%)' }))
      ])
    ])
  ]),
  transition('show_component2 => show_component1', [
    group([
      // Reverse the animations for the opposite transition
      query('app-component1', [
        style({ transform: 'translateX(-100%)' }),
        animate('300ms linear', style({ transform: 'translateX(0%)' }))
      ]),
      query('app-component2', [
        animate('300ms linear', style({ transform: 'translateX(100%)' }))
      ])
    ])
  ])
]);

问题根源 #

1. 子组件宽度未明确填满容器：仅通过flex-grow:1让子组件占满空间，但未设置width:100%，动画过程中flex布局的宽度计算偏差会导致容器黄色背景透出。
2. *ngIf的DOM切换时机冲突：*ngIf会在状态切换时立即销毁/创建组件，动画过程中可能存在短暂的DOM空白期，或者新旧组件无法完全重叠覆盖容器。

修复方案 #

1. 强制子组件填满容器：给子组件添加width:100%，确保尺寸始终匹配容器：

app-component1, app-component2 {
  flex-shrink: 0;
  flex-grow: 1;
  width: 100%;
}

同时给子组件内部的.container也设置满宽高：

/* 子组件SCSS */
.container {
  width: 100%;
  height: 100%;
}

2. 修改组件显示逻辑，避免DOM即时销毁：用[hidden]替代*ngIf，让新旧组件在动画期间同时存在于DOM中，保证切换时无间隙：

<div class="container" [@slideAnimation]="swap_state">
  <app-component1 (click)="swap()" [hidden]="swap_state !== 'show_component1'"></app-component1>
  <app-component2 (click)="swap()" [hidden]="swap_state !== 'show_component2'"></app-component2>
</div>

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