Angular 动画示例

Angular 提供了一套强大的动画库，可以帮助开发者实现各种丰富的动画效果。以下是一些常见的 Angular 动画示例：

1. 简单的淡入淡出动画

trigger('flyInOut', [
  state('in', style({ opacity: 1, transform: 'translateX(0)' })),
  state('out', style({ opacity: 0, transform: 'translateX(-100%)' })),
  transition('in => out', animate('300ms ease-out')),
  transition('out => in', animate('300ms ease-in'))
]);

2. 使用动画库

AngularCDK 提供了丰富的动画库，可以轻松实现复杂的动画效果。

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

export const exampleAnimation = trigger('exampleAnimation', [
  state('void', style({ opacity: 0 })),
  state('*', style({ opacity: 1 })),
  transition('void => *', [animate(300)]),
  transition('* => void', [animate(300)])
]);

3. 动画与组件结合

@Component({
  selector: 'app-animation-example',
  templateUrl: './animation-example.component.html',
  styleUrls: ['./animation-example.component.css'],
  animations: [exampleAnimation]
})
export class AnimationExampleComponent {
  // Component logic
}

Angular 动画效果示例

更多关于 Angular 动画的教程和示例，请访问我们的 Angular 动画教程页面。