如何实现Angular中Flexbox内两元素无缝切换动画，避免布局跳动？

核心问题：使用Angular动画实现两个div滑入滑出切换时，Flex容器内两个元素会在过渡阶段同时存在，导致布局错位，动画不流畅。

问题原因 #

*ngIf切换元素时，离开的元素还处于动画过渡状态（未完全从DOM移除），而进入的元素已经开始渲染，Flexbox会同时计算两个元素的布局空间，进而导致容器偏移。

解决方案 #

1. 让两个元素叠加在同一位置
   给父容器.controls设置相对定位，两个子元素设置绝对定位，脱离文档流，这样它们不会同时占用Flex容器的空间，避免布局计算冲突。
   添加如下CSS：

   .controls {
     position: relative;
     width: 200px;
     height: 200px;
   }
   .button, .replacement-icon {
     position: absolute;
     top: 0;
     left: 0;
   }
   

2. 调整动画时序，避免元素同时显示
   原fadeInOut动画的进入阶段有400ms延迟，导致两个元素同时显示的时间过长。去掉延迟，让进入动画和离开动画的时长保持一致，实现无缝衔接：

   trigger('fadeInOut', [
     state('in', style({ opacity:1,transform: 'translateY(0)' })),
     transition('void => *', [
       style({ opacity:0,transform: 'translateY(-100%)' }),
       animate('200ms') // 移除400ms延迟
     ]),
     transition('* => void', [
       animate(200, style({ opacity:0,transform: 'translateY(-100%)' }))
     ])
   ])
   

3. 固定容器尺寸
   给.controls设置固定宽高，确保动画过程中容器尺寸不会因为元素切换而变化，彻底避免布局抖动。

修改后的完整代码 #

CSS代码

body {
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}
.controls {
  position: relative;
  width: 200px;
  height: 200px;
}
.button {
  align-items: center;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}
.bottom {
  background: #01bdd6;
  border-radius: 50%;
  cursor: pointer;
  height: 100px;
  position: absolute;
  width: 100px;
}
.button:active .bottom {
  background: #1578e9;
}
.icon {
  height: 200px;
  transform: rotate(-120deg);
  transition: transform 500ms;
  width: 200px;
}
.replacement-icon {
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

Angular动画代码

animations: [
  trigger('flyInOut', [
    state('in', style({ opacity:1,transform: 'translateY(0)' })),
    transition('void => *', [
      style({ opacity:0,transform: 'translateY(100%)' }),
      animate('200ms')
    ]),
    transition('* => void', [
      animate(200, style({ opacity:0,transform: 'translateY(100%)' }))
    ])
  ]),
  trigger('fadeInOut', [
    state('in', style({ opacity:1,transform: 'translateY(0)' })),
    transition('void => *', [
      style({ opacity:0,transform: 'translateY(-100%)' }),
      animate('200ms')
    ]),
    transition('* => void', [
      animate(200, style({ opacity:0,transform: 'translateY(-100%)' }))
    ])
  ])
]

HTML代码（无需修改）

<div class="controls">
  <div
    [@fadeInOut]
    *ngIf="resultVisible"
    class="replacement-icon"
    width="200"
    height="200"
  >
    <p-button label="Next" (onClick)="nextThing()"></p-button>
  </div>
<div
  [@flyInOut]
  *ngIf="!resultVisible"
  class="button"
  #playButton
  onclick="this.classList.toggle('active')"
  (click)="toggleMusic()"
>
  <div class="bottom" x="0" y="0" width="200" height="200"></div>
  <div class="icon" width="200" height="200">
    <div>
      <div
        class="middle left"
        x="0"
        y="0"
        width="200"
        height="200"
        fill="#fff"
      ></div>
      <div
        class="middle right"
        x="0"
        y="0"
        width="200"
        height="200"
        fill="#fff"
      ></div>
    </div>
  </div>
  <div class="pointer"></div>
</div>

这样修改后，两个元素会在同一位置叠加切换，动画过程中不会干扰Flex容器的布局，彻底解决偏移问题，过渡效果更流畅。

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