Angular 提供了强大的动画系统，使得在应用中添加各种动画变得相对容易。Angular 动画系统允许你为组件的状态变化、进场和离场等定义动画。

以下是一些基本的 Angular 动画概念和示例：

1. 动画模块导入：

在使用 Angular 动画之前，需要导入 BrowserAnimationsModule 模块，它包含了 Angular 动画的核心功能。在你的应用模块中导入：
// app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [BrowserAnimationsModule, ...],
  ...
})
export class AppModule { }

2. 在组件中定义动画：

在组件中使用 @Component 装饰器的 animations 属性定义动画。以下是一个简单的例子：
// app.component.ts
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-root',
  template: `
    <div [@fadeInOut]="animationState" (click)="toggleAnimation()">Click me</div>
  `,
  animations: [
    trigger('fadeInOut', [
      state('in', style({ opacity: 1 })),
      state('out', style({ opacity: 0 })),
      transition('in => out', animate('500ms ease-out')),
      transition('out => in', animate('500ms ease-in'))
    ])
  ]
})
export class AppComponent {
  animationState = 'in';

  toggleAnimation() {
    this.animationState = this.animationState === 'in' ? 'out' : 'in';
  }
}

3. 使用 ngIf 添加进场和离场动画：

你可以使用 ngIf 结合 Angular 动画来为元素的进场和离场定义动画。以下是一个简单的例子：
// app.component.ts
import { Component } from '@angular/core';
import { trigger, transition, style, animate, state } from '@angular/animations';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="isVisible" [@fadeInOut]>I appear and disappear</div>
    <button (click)="toggleVisibility()">Toggle Visibility</button>
  `,
  animations: [
    trigger('fadeInOut', [
      state('in', style({ opacity: 1 })),
      state('out', style({ opacity: 0 })),
      transition('in => out', animate('500ms ease-out')),
      transition('out => in', animate('500ms ease-in'))
    ])
  ]
})
export class AppComponent {
  isVisible = true;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

4. 使用 ngFor 和 trackBy 添加动画：

如果你使用 ngFor 迭代元素列表，并希望为每个元素的变化定义动画，你可以使用 trackBy 函数。以下是一个示例：
// app.component.ts
import { Component } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let item of items; trackBy: trackByFn" [@fadeInOut]>{{ item }}</div>
    <button (click)="addItem()">Add Item</button>
  `,
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [style({ opacity: 0 }), animate('500ms ease-out', style({ opacity: 1 }))]),
      transition(':leave', [animate('500ms ease-in', style({ opacity: 0 }))]),
    ])
  ]
})
export class AppComponent {
  items: string[] = ['Item 1', 'Item 2', 'Item 3'];

  trackByFn(index: number, item: string): string {
    return item;
  }

  addItem() {
    this.items.push(`Item ${this.items.length + 1}`);
  }
}

这只是 Angular 动画系统的入门示例。你可以根据你的具体需求更进一步定义各种复杂的动画效果。使用 Angular 动画系统的关键是了解关键的动画函数（trigger、state、style、transition、animate等）以及如何将它们组合在一起以创建所需的动画。


转载请注明出处：http://www.pingtaimeng.com/article/detail/4978/Angular