Angular Animations:如何动态设置过渡时间？

<div [@myAnimation]="animationState"></div>

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

@Component({
  // ...
  animations: [
    trigger('myAnimation', [
      state('start', style({
        // 初始状态的样式
      })),
      state('end', style({
        // 结束状态的样式
      })),
      transition('start => end', animate('500ms')),
      transition('end => start', animate('200ms')),
    ])
  ]
})
export class MyComponent {
  animationState: string = 'start';

  toggleAnimation() {
    this.animationState = this.animationState === 'start' ? 'end' : 'start';
  }
}

toggleAnimation() {
  this.animationState = this.animationState === 'start' ? 'end' : 'start';
}