为什么我的滑动组件切换有间隙？

Question

目前我的组件工作方式与添加的 .gif 中一样，带有黄色间隙。

我需要组件 1 和 2 能够无间隙移动。 我不明白为什么黄色背景在动画过程中变得可见。

如果有人能指出造成这种情况的原因，我们将不胜感激。

组件1和组件2 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;
}

这是我使用的角度动画：

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%)' }))
      ])
    ])
  ])
]);

Answer 1

问题是我假设组件2的起始x位置是translateX(100%)，因为它从组件1的末尾开始。但是两个组件的起点只是translateX(0)