Estoy probando una animación simple de aparición/desaparición gradual en un botón usando Angular 4 Animations. El problema que tengo es que, debido a que estoy usando valores booleanos, no se activa nada. Desde las herramientas de desarrollo, parece que se agrega una clase .ng-animating al elemento, pero no se cambia nada.

Esta es una muestra del código que tengo:

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

Sé que el código anterior solía funcionar con Angular 2, sin embargo, en este caso no funciona. La única solución que he encontrado es trabajar usando una string en lugar de un 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; }

Del código anterior notará que el disparador de animación @test está leyendo una cadena ( isActive.toString() ) y la función de transition ha pasado true <=> false en lugar de 0 <=> 1 .

Aunque lo hice funcionar, no estoy seguro de si hubo alguna actualización en el módulo de Animación. ¿Alguien sabe de algún cambio en el módulo de animación con la actualización de Angular 4?