Angular 4動畫布爾觸發器

Question

我正在使用Angular 4動畫測試按鈕上的一個簡單的淡入/淡出動畫。我遇到的問題是，因爲我使用布爾值沒有任何被觸發。從開發工具，它看起來像一個.ng-animating類被添加到元素，但沒有任何更改。

這是我的代碼示例：

@Component({ 
    selector: 'fade-btn-test', 
    styles: [ 
     require('./fade-btn-test.component.scss') 
    ], 
    template: ` 
     <button [@test]="isActive" (click)="isActive = !isActive">My Button</button> 
    `, 
    animations: [ 
     trigger('test', [ 
      state('true', style({ opacity: 0 })), 
      state('false', style({ opacity: 1 })), 
      transition('0 <=> 1', animate(500)) 
     ]) 
    ] 
}) 

export class FadeBtnTestComponent { 
    isActive: boolean = false; 
} 

我知道，用上面的代碼與角2的工作，但是在這種情況下，它不工作。我找到的唯一解決方案是使用string而不是boolean。

@Component({ 
    selector: 'fade-btn-test', 
    styles: [ 
     require('./fade-btn-test.component.scss') 
    ], 
    template: ` 
     <button [@test]="isActive.toString()" (click)="isActive = !isActive">My Button</button> 
    `, 
    animations: [ 
     trigger('test', [ 
      state('true', style({ opacity: 0 })), 
      state('false', style({ opacity: 1 })), 
      transition('true <=> false', animate(500)) 
     ]) 
    ] 
}) 

export class FadeBtnTestComponent { 
    isActive: boolean = false; 
} 

從上面的代碼，你會注意到，動畫觸發@test正在讀一個字符串（isActive.toString()）和transition功能true <=> false傳遞，而不是0 <=> 1。

雖然我得到它的工作，我不知道是否有任何更新動畫模塊本身。有沒有人知道Angular 4更新對動畫模塊的更改？

Answer 1

使用字符串值，而不是布爾值，並相應地改變狀態的值：

@Component({ 
    selector: 'fade-btn-test', 
    styles: [ 
     require('./fade-btn-test.component.scss') 
    ], 
    template: ` 
     <button [@test] = "value" (click)="isActive = !isActive">My Button</button> 
    `, 
    animations: [ 
     trigger('test', [ 
      state('active', style({ opacity: 0 })), 
      state('inactive', style({ opacity: 1 })), 
      transition('active <=> inactive', animate(500)) 
     ]) 
    ] 
}) 

export class FadeBtnTestComponent { 
    value: string= 'active'; 
} 

Answer 2

根據Angular changelog，過渡布爾值錯誤是固定在4.0.0-RC6（檢查PR）。

但是，Angular 2中支持的混合語法不再有效。布爾值必須在這兩個狀態定義和過渡表達被用作下面的示例中：

export const ANIMATION_SAMPLE = trigger('booleanTrigger', [ 
    state('1', style({ ...})), 
    state('0', style({ ...})), 
    transition('1 => 0', animate(...)), 
    transition('0 => 1', animate(...)) 
]); 

This answer comment表明相同的解決方法與布爾觸發器工作。

Answer 3

這是這是此報告中的錯誤： https://github.com/angular/angular/issues/15247 並固定有這個PR： https://github.com/angular/angular/pull/15311