我正在尝试触发一个绑定到布尔型属性的转换,但这似乎没有触发。
这是我的动画触发器的简化版本
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)
}
第二个示例运行得很好
我的问题是
发布于 2016-11-08 14:39:06
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'))
])
发布于 2016-11-02 11:27:01
我也有同样的问题。不确定boolean是否支持作为触发器,但我找到的变通方法是定义一个带有getter的字符串属性,以将布尔值作为字符串返回。如下所示:
get somePropertyStr():string {
return this.someProperty.toString();
}
然后,您应该将动画绑定到该somePropertyStr
属性。
再说一次,这是一个丑陋的变通办法,最好的办法是能够使用布尔值。
发布于 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>
这里最好的建议是使用一个与其真正含义相对应的状态。在这种情况下,真与假到底是什么意思?
我考虑过使用管道来转换布尔值,但这样做的唯一好处是确保您与状态字符串保持一致。
https://stackoverflow.com/questions/40340919
复制相似问题