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，但是在这种情况下它不起作用。我发现的唯一解决方案是使用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而不是{{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';
}

Answer 2

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

Answer 3

根据Angular changelog，转换布尔值bug在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建议使用与布尔触发器相同的解决方法。

Angular 4 Animations布尔触发器

3 个答案: