Angular2 动画的参数

当涉及创建流畅、生动的 Web 应用时，动画是不可或缺的元素。Angular2 提供了强大的动画功能，让开发者能够轻松实现各种动态效果。通过使用 Angular2 提供的动画参数，可以精确控制动画的行为和外观，让用户体验更加丰富和吸引人。本文将探讨 Angular2 动画的参数，并提供案例代码演示其应用。

typescript
import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  animations: [
    trigger('myAnimation', [
      state('start', style({
        opacity: 0,
        transform: 'translateY(-20px)'
      })),
      state('end', style({
        opacity: 1,
        transform: 'translateY(0)'
      })),
      transition('start => end', [
        animate('500ms ease-out')
      ]),
      transition('end => start', [
        animate('300ms ease-in')
      ])
    ])
  ]
})
export class ExampleComponent implements OnInit {
  animationState = 'start';
  toggleAnimation() {
    this.animationState = this.animationState === 'start' ? 'end' : 'start';
  }
  constructor() { }
  ngOnInit() {
  }
}