Angular 4 Animations布尔触发器

发布时间：2020-12-17 07:02:04 所属栏目：安全来源：网络整理

导读：我正在使用Angular 4 Animations在按钮上测试一个简单的淡入/淡出动画.我遇到的问题是因为我使用布尔值没有触发任何东西.从开发工具看起来像.ng动画类被添加到元素但没有任何改变. 这是我的代码示例： @Component({ selector: 'fade-btn-test',styles: [ req

我正在使用Angular 4 Animations在按钮上测试一个简单的淡入/淡出动画.我遇到的问题是因为我使用布尔值没有触发任何东西.从开发工具看起来像.ng动画类被添加到元素但没有任何改变.

这是我的代码示例：

@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,但是在这种情况下它不起作用.我发现的唯一解决方案是使用字符串而不是布尔值.

@Component({
    selector: 'fade-btn-test',template: `
        <button [@test]="isActive.toString()" (click)="isActive = !isActive">My Button</button>
    `,transition('true <=> false',animate(500))
        ])
    ]
})

export class FadeBtnTestComponent {
    isActive: boolean = false;
}

从上面的代码中你会注意到动画触发器@test正在读取一个字符串(isActive.toString())并且转换函数具有true< => false传递而不是0< => 1.

虽然我让它工作,但我不确定动画模块本身是否有任何更新.是否有人知道使用Angular 4更新动画模块的任何更改？

解决方法

使用字符串值而不是布尔值,并相应地更改状态值：

@Component({
    selector: 'fade-btn-test',template: `
        <button [@test] = "value" (click)="isActive = !isActive">My Button</button>
    `,[
            state('active',state('inactive',transition('active <=> inactive',animate(500))
        ])
    ]
})

export class FadeBtnTestComponent {
    value: string= 'active';
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!