Angular 4 Boolean Trigger Animation

Question

I am testing a simple animation in / fade out on a button using Angular 4 animations. The problem I am facing is that since I use booleans, nothing starts. From the dev tools, it looks like a class is .ng-animatingadded to an element, but nothing changes.

This is the sample code that I have:

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

I know that the above code was used to work with Angular 2, however in this case it does not work. The only solution I found was to work with stringinstead 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;
}

From the above code, you will notice that the animation trigger @testreads the string ( isActive.toString()), and the function transitionhas true <=> falseinstead 0 <=> 1.

, , - Animation. - - 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

, : https://github.com/angular/angular/issues/15247 PR: https://github.com/angular/angular/pull/15311

Answer 3

Angular changelog ​​ 4.0.0-rc6 ( PR).

However, the mixed syntax supported in Angular 2 no longer works. Boolean values ​​should be used both in the definition of the state definition and in the transition, as in the example below:

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

This answer comment offers the same workaround for working with boolean triggers.