多個狀態之間的動畫

此模板中的 <div> 增長到 50px 然後 100px，然後單擊按鈕時縮小回 20px。

每個 state 都具有 @Component 後設資料中描述的相關樣式。

任何 state 處於活動狀態的邏輯都可以在元件邏輯中進行管理。在這種情況下，元件變數 size 保持字串值 small，medium 或 large。

<div> 元素通過 @Component 後設資料中指定的 trigger 響應該值：[@size]="size"。

@Component({
  template: '<div [@size]="size">Some Text</div><button (click)="toggleSize()">TOGGLE</button>',
  animations: [
    trigger('size', [
      state('small', style({
        height: '20px'
      })),
      state('medium', style({
        height: '50px'
      })),
      state('large', style({
        height: '100px'
      })),
      transition('small => medium', animate('100ms')),
      transition('medium => large', animate('200ms')),
      transition('large => small', animate('300ms'))
    ])
  ]
})
export class TestComponent {

    size: string;

    constructor(){
        this.size = 'small';
    }
    toggleSize(){
        switch(this.size) {
            case 'small':
                this.size = 'medium';
                break;
            case 'medium':
                this.size = 'large';
                break;
            case 'large':
                this.size = 'small';
        }
    }
}