Angular [@fadeInOut]动画仅首次生效问题排查与解决方案咨询

问题描述 #

使用*ngIf="isExpanded"控制内容显隐，同时绑定[@fadeInOut]动画，但动画仅在页面首次加载时生效，后续切换isExpanded状态时内容不再显示。

相关代码：

HTML代码 #

<div *ngIf="isExpanded" [@fadeInOut]>
  <ng-content select="[Content]"></ng-content>
</div>

TS动画代码 #

trigger('fadeInOut', [
  state('0, void', style({
      opacity: 0
  })),
  state('1, *', style({
      opacity: 1
  })),
  transition('1 => 0', animate('10ms ease-out')),
  transition('0 => 1', animate('100ms ease-in')),
  transition('void <=> *', animate('200ms ease-in'))
]),

成因分析 #

核心问题是动画状态定义语法错误：
Angular的state()方法不支持将多个状态（如0和void）用逗号分隔写在同一个参数里，这种写法会导致Angular无法正确解析状态映射。当*ngIf将元素从DOM中移除（进入void状态）后，再次切换isExpanded为true时，动画系统无法正确匹配状态过渡逻辑，导致元素无法正常渲染显示。

此外，transition的重复定义也可能干扰动画执行，但最关键的是状态定义的语法错误。

解决办法 #

方案1：修复现有动画的状态定义 #

将多个状态拆分为独立的state()声明，利用void状态配合*ngIf的DOM增删逻辑：

trigger('fadeInOut', [
  // 元素被*ngIf移除时的状态（void）
  state('void', style({ opacity: 0 })),
  // 元素存在于DOM中的默认状态
  state('*', style({ opacity: 1 })),
  // 从无到有（创建元素）的过渡
  transition('void => *', animate('200ms ease-in')),
  // 从有到无（移除元素）的过渡
  transition('* => void', animate('10ms ease-out'))
])

HTML无需修改，保持原有的*ngIf="isExpanded" [@fadeInOut]即可。

方案2：绑定动画到isExpanded变量 #

如果希望基于isExpanded的布尔值控制状态，可将动画直接绑定到该变量，同时调整状态定义：

TS代码

trigger('fadeInOut', [
  state('false', style({ opacity: 0 })),
  state('true', style({ opacity: 1 })),
  transition('false => true', animate('100ms ease-in')),
  transition('true => false', animate('10ms ease-out'))
])

HTML代码

<div *ngIf="isExpanded" [@fadeInOut]="isExpanded">
  <ng-content select="[Content]"></ng-content>
</div>

方案3：替代*ngIf的显隐方式 #

若不想依赖*ngIf的DOM增删逻辑，可通过控制元素的display属性实现显隐，避免元素被移除出DOM：

HTML代码

<div [@fadeInOut]="isExpanded" [style.display]="isExpanded ? 'block' : 'none'">
  <ng-content select="[Content]"></ng-content>
</div>

TS代码（同方案2）

trigger('fadeInOut', [
  state('false', style({ opacity: 0 })),
  state('true', style({ opacity: 1 })),
  transition('false => true', animate('100ms ease-in')),
  transition('true => false', animate('10ms ease-out'))
])

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