각도 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을 사용하는 것입니다. 당신이 애니메이션 트리거 @test 문자열 ( isActive.toString())과 transition 기능을 읽고 있습니다 것입니다 위의 코드에서

@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; 
} 

는 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