Angular 4 Animations布尔触发器

Question

我正在使用Angular 4 Animations在按钮上测试一个简单的淡入/淡出动画.我遇到的问题是因为我使用布尔值没有触发任何东西.从开发工具看起来,类似于.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;
}

我知道上面的代码曾用于Angular 2,但是在这种情况下它不起作用.我发现的唯一解决方案是使用a string而不是a 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';
}