角度4アニメーションブールトリガー

Question

角度4アニメーションを使用して、ボタン上で簡単にフェードイン/フェードアウトするアニメーションをテストしています。私が持っている問題は、私がブール値を使用しているので、何も引き起こされていないということです。 devツールからは、.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で動作するように使用されていることを知っています。私が見つけた唯一の解決策は、booleanの代わりにstringを使用して作業することです。

@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によれば、遷移ブール値のバグは（PRをチェック）4.0.0-RC6で固定しました。

ただし、角度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