Angular 4 Animations 布尔触发器答案

【问题标题】：Angular 4 Animations boolean triggersAngular 4 Animations 布尔触发器
【发布时间】：2017-09-18 17:44:45
【问题描述】：

我正在使用 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 一起工作，但是在这种情况下它不起作用。我发现的唯一解决方案是使用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 更新对动画模块的任何更改吗？

【问题讨论】：

你读过更新日志吗？
是的，但找不到与此相关的任何内容
我在更改日志中也找不到任何其他内容，但如果没有您的解决方法，似乎不再支持 true false 。如果您不想使用 .toString() ，您可以将状态设为 0 或 1 而不是 true 或 false。
是的，它似乎不再受支持，现在我将使用解决方法。在这种情况下，我更喜欢使用布尔值。

标签： angular angular2-animation

【解决方案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';
}

【讨论】：

【解决方案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 建议使用相同的解决方法来处理布尔触发器。

【讨论】：

【解决方案3】：

这是此处报告的错误： https://github.com/angular/angular/issues/15247 并通过此 PR 修复： https://github.com/angular/angular/pull/15311

【讨论】：