Angular 4 动 Canvas 尔触发器

Question

我正在使用 Angular 4 动画在按钮上测试一个简单的淡入/淡出动画。我遇到的问题是，因为我使用的是 bool 值，所以没有任何东西被触发。从开发工具来看，它看起来像一个 .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 一起工作，但是在这种情况下它不起作用。我找到的唯一解决方案是使用 string而不是 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

使用字符串值而不是 bool 值，并相应地更改状态值:

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