Angular 2动画-布尔触发器？
Angular 2动画-布尔触发器？
提问于 2016-10-31 19:06:19
我正在尝试触发一个绑定到布尔型属性的转换，但这似乎没有触发。
这是我的动画触发器的简化版本
trigger(
'trueFalseAnimation', [
transition('* => true', [
style({backgroundColor: '#00f7ad'}),
animate('2500ms', style({backgroundColor: '#fff'}))
]),
transition('* => false', [
style({backgroundColor: '#ff0000'}),
animate('2500ms', style({backgroundColor: '#fff'}))
])
]
)HTML：
<div [@trueFalseAnimation]="model.someProperty">Content here</div>要测试：
ngOnInit() {
setTimeout(() => {
this.model.someProperty = true;
setTimeOut(() => {
this.model.someProperty = false;
}, 5000);
}, 1000)
}当someProperty改变时，触发器永远不会发生。
作为一个快速测试，我将触发器更改为使用字符串，它可以正常工作
trigger(
'trueFalseAnimation', [
transition('* => Success', [
style({backgroundColor: '#00f7ad'}),
animate('2500ms', style({backgroundColor: '#fff'}))
]),
transition('* => Failed', [
style({backgroundColor: '#ff0000'}),
animate('2500ms', style({backgroundColor: '#fff'}))
])
]
)要测试：
ngOnInit() {
setTimeout(() => {
this.model.someProperty = "Success";
setTimeOut(() => {
this.model.someProperty = "Failed";
}, 5000);
}, 1000)
}第二个示例运行得很好
我的问题是
- 是否支持将布尔值作为触发器？
- 如果对#1回答是，我做错了什么？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-11-08 14:39:06
- 似乎不是这样的。我看到一个问题(12337)已经被提出，但到目前为止还没有更新。
- 另一种选择是使用1和0而不是true
- false。
trigger('isVisibleChanged', [
state('true' , style({ opacity: 1, transform: 'scale(1.0)' })),
state('false', style({ opacity: 0, transform: 'scale(0.0)' })),
transition('1 => 0', animate('300ms')),
transition('0 => 1', animate('900ms'))
])Stack Overflow用户
发布于 2016-11-02 11:27:01
我也有同样的问题。不确定boolean是否支持作为触发器，但我找到的变通方法是定义一个带有getter的字符串属性，以将布尔值作为字符串返回。如下所示：
get somePropertyStr():string {
return this.someProperty.toString();
}然后，您应该将动画绑定到该somePropertyStr属性。
再说一次，这是一个丑陋的变通办法，最好的办法是能够使用布尔值。
Stack Overflow用户
发布于 2018-09-05 03:03:00
状态被定义为一个字符串，所以我们需要坚持这一点。
根据您的代码，最简单但也是最灵活的方法是
<div [@trueFalseAnimation]="model.someProperty?.toString()">Content here</div>但这很糟糕，所以这可能更好
<div [@trueFalseAnimation]="model.someProperty ? 'active' : 'inactive'">Content here</div>
<div [@trueFalseAnimation]="model.someProperty ? 'visible' : 'hidden'">Content here</div>
<div [@trueFalseAnimation]="model.someProperty ? 'up' : 'down'">Content here</div>
<div [@trueFalseAnimation]="model.someProperty ? 'left' : 'right'">Content here</div>这里最好的建议是使用一个与其真正含义相对应的状态。在这种情况下，真与假到底是什么意思？
我考虑过使用管道来转换布尔值，但这样做的唯一好处是确保您与状态字符串保持一致。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40340919
复制相关文章
相似问题
腾讯云开发者
