Angular 17中fadeInOut动画子组件仅淡入生效，淡出失效问题排查

这不是Angular的Bug，是你的实现方式存在问题。

问题原因 #

当用@if控制子组件的显示隐藏时，Angular会在showChildComponent切换为false后立即销毁子组件实例，导致绑定在子组件上的:leave动画还没来得及执行就被终止。而普通HTML元素（如span）不会被立即销毁，Angular会等待其动画完成后再从DOM中移除，所以淡入淡出都正常。

解决方案 #

方案1：使用Angular 17新特性@animate控制块

@animate是Angular 17专门为动画场景设计的控制语法，它会等待绑定的动画完成后再销毁组件，完美适配这种场景。修改父组件代码如下：

@animate(showChildComponent) {
  <app-child-component
    [@fadeInOut]
    [someInput]="Input"
    (someEvent)="handleEvent($event)"/>
}

方案2：给子组件添加外层包裹元素

在子组件的模板外层添加一个容器元素（如div），将动画触发器绑定到这个容器上，而非子组件本身。这样:leave动画执行时，是容器元素在做淡出，子组件的销毁会等待动画完成：
子组件模板：

<div [@fadeInOut]>
  <!-- 子组件原有内容 -->
</div>

父组件仍使用@if控制子组件的显示即可。

方案3：父组件动画中调用animateChild()

修改父组件的动画配置，在:leave过渡中加入animateChild()，确保Angular等待子组件的动画完成后再继续执行父组件的动画逻辑：

animations: [
  trigger('fadeInOut', [
    transition(':enter', [
      style({ opacity: 0 }),
      animate('150ms', style({ opacity: 1 })),
    ]),
    transition(':leave', [
      animateChild(),
      animate('150ms', style({ opacity: 0 })),
    ]),
  ]),
],

注意：这种方式需要子组件也声明该动画触发器，或者父组件将动画导出供子组件使用。

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