如何为Angular的*ngIf元素添加Animate.css的fadeOutLeft动画？

我懂你想把测试按钮上的fadeOutLeft动画用到*ngIf控制的元素上，让元素消失的时候能完整播放这个动画对吧？直接用*ngIf的话，元素会被立刻移除，根本来不及触发动画，所以得结合Angular的动画模块来实现，下面是具体的步骤和代码示例：

1. 先导入动画模块 #

首先确保你的模块文件（比如页面模块或者根模块）里已经导入了Angular的动画模块：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    // 其他你需要的模块
    BrowserAnimationsModule
  ]
})
export class YourPageModule {}

2. 在组件里定义动画触发器 #

接下来在你的组件类中定义动画触发器，实现fadeOutLeft的效果：

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'your-component',
  templateUrl: 'your-component.html',
  animations: [
    trigger('fadeOutLeft', [
      // 元素可见时的初始状态
      state('show', style({ 
        opacity: 1, 
        transform: 'translateX(0)' 
      })),
      // 元素消失时的目标状态
      state('hide', style({ 
        opacity: 0, 
        transform: 'translateX(-100%)' 
      })),
      // 从可见到消失的过渡动画，时长和你测试的1000ms保持一致
      transition('show => hide', animate('1000ms ease-out')),
    ])
  ]
})
export class YourComponent {
  clicked = false;
  // 控制动画状态的变量，初始设为可见状态
  elementAnimationState = 'show';

  triggerElementFadeOut() {
    // 先切换动画状态，触发fadeOutLeft动画
    this.elementAnimationState = 'hide';
    // 等动画执行完毕（1000ms后），再切换clicked让*ngIf移除元素
    setTimeout(() => {
      this.clicked = true;
    }, 1000);
  }
}

3. 模板里结合动画和*ngIf #

最后在模板里把动画和*ngIf绑定，按钮触发我们定义的方法：

<ion-scroll scrollX="true">
  <!-- 用[@fadeOutLeft]绑定动画状态，*ngIf控制元素最终是否存在 -->
  <div [@fadeOutLeft]="elementAnimationState" *ngIf="!clicked">
    <!-- 这里放你的元素内容 -->
    我是要消失的元素！
  </div>
</ion-scroll>

<button ion-button (click)="triggerElementFadeOut()">Click me!</button>

原理说明 #

这种方式的核心是先触发动画，等动画执行完成后再移除元素：点击按钮后，先把动画状态切换到hide，元素开始播放fadeOutLeft动画；等动画时长到了（1000ms），再把clicked设为true，*ngIf就会移除元素，这样用户就能看到完整的消失动画了。

如果你之前用的是Ionic的animates指令，其实也可以配合，但Angular原生的动画模块和*ngIf的配合会更灵活，能精准控制元素的生命周期和动画时机。

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