7

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

4

3 回答 3

1

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

于 2017-09-18T09:44:45.727 回答
1

根据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(...))
]);

此答案评论建议使用相同的解决方法来处理布尔触发器。

于 2017-09-01T11:53:13.513 回答
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';
}
于 2017-08-18T10:21:39.703 回答