Angular 社区 - 动画示例

在 Angular 中实现动画是一种常见的做法，可以使你的应用程序更加动态和引人注目。以下是一些关于 Angular 动画的示例。

动画基础

Angular 提供了多种动画库来帮助你实现动画效果，如 @angular/animations 包。

• 基本动画
  • 使用 ngFor 和 *ngIf 实现列表项的添加和删除动画。
  • 使用 CSS 过渡和动画实现简单的样式变化。

示例代码

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

@Component({
  selector: 'app-animation-example',
  templateUrl: './animation-example.component.html',
  styleUrls: ['./animation-example.component.css'],
  animations: [
    trigger('animateState', [
      state('inactive', style({ opacity: 0 })),
      transition('inactive => active', [
        animate('300ms ease-out', style({ opacity: 1 }))
      ]),
      transition('active => inactive', [
        animate('300ms ease-in', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class AnimationExampleComponent {
  state = 'inactive';

  toggleState() {
    this.state = this.state === 'inactive' ? 'active' : 'inactive';
  }
}

扩展阅读

• Angular 官方文档 - 动画

图片示例

Angular 动画示例