typescript Angular 2 Animation - 布尔触发器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40340919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 Animation - boolean trigger?
提问by Steven Yates
I'm trying to trigger a transition bound to a boolean property, but this doesn't seem to fire.
我正在尝试触发绑定到布尔属性的转换，但这似乎没有触发。
Here is a cut down version of my animation trigger
这是我的动画触发器的简化版本
trigger(
'trueFalseAnimation', [
transition('* => true', [
style({backgroundColor: '#00f7ad'}),
animate('2500ms', style({backgroundColor: '#fff'}))
]),
transition('* => false', [
style({backgroundColor: '#ff0000'}),
animate('2500ms', style({backgroundColor: '#fff'}))
])
]
)
HTML:
HTML：
<div [@trueFalseAnimation]="model.someProperty">Content here</div>
To test:
去测试：
ngOnInit() {
setTimeout(() => {
this.model.someProperty = true;
setTimeOut(() => {
this.model.someProperty = false;
}, 5000);
}, 1000)
}
The trigger never happens when the somePropertychanges.
触发器永远不会在someProperty更改时发生。
As a quick test I changed the trigger to use a string and it works
作为快速测试，我将触发器更改为使用字符串，并且可以正常工作
trigger(
'trueFalseAnimation', [
transition('* => Success', [
style({backgroundColor: '#00f7ad'}),
animate('2500ms', style({backgroundColor: '#fff'}))
]),
transition('* => Failed', [
style({backgroundColor: '#ff0000'}),
animate('2500ms', style({backgroundColor: '#fff'}))
])
]
)
To test:
去测试：
ngOnInit() {
setTimeout(() => {
this.model.someProperty = "Success";
setTimeOut(() => {
this.model.someProperty = "Failed";
}, 5000);
}, 1000)
}
The second example works just fine
第二个例子工作得很好
My questions are
我的问题是
- Are boolean supported as triggers?
- If yes to #1 what am I doing wrong?
- 是否支持布尔值作为触发器？
- 如果是 #1 我做错了什么？
回答by ScottL
- It seems not. I saw that an an issue (12337) has already been raised for this, but there has been no update so far.
- One other alternative is to use 1 and 0 instead of true and false.
- 似乎没有。我看到已经为此提出了一个问题 ( 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'))
])
回答by OvSleep
I'm having the same issue. Not sure if boolean are supported as triggers, but the workaround I found was to define a string property with a getter to return the boolean value as string. Something like this:
我有同样的问题。不确定布尔值是否支持作为触发器，但我发现的解决方法是定义一个带有 getter 的字符串属性，以将布尔值作为字符串返回。像这样的东西：
get somePropertyStr():string {
return this.someProperty.toString();
}
Then you should bind your animation to that somePropertyStrproperty.
然后您应该将您的动画绑定到该somePropertyStr属性。
Once again, this is an ugly workaround, best thing would be able to use the boolean value.
再一次，这是一个丑陋的解决方法，最好的办法是能够使用布尔值。
回答by Simon_Weaver
A state is defined as being a string, so we need to stick to that.
状态被定义为一个字符串，所以我们需要坚持这一点。
The simplest - but ickiest - way based on your code is this
基于您的代码的最简单但最讨厌的方法是
<div [@trueFalseAnimation]="model.someProperty?.toString()">Content here</div>
But this is pretty awful, so this is probably better
但这太糟糕了，所以这可能更好
<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>
The best advice here would be to use a state that corresponds to what it really means. What does true and false really mean in this context anyway?
这里最好的建议是使用与其真正含义相对应的状态。在这种情况下，true 和 false 到底意味着什么？
I considered making a pipe to convert a boolean, but the only benefit of that would be to make sure you're being consistent with your state strings.
我考虑制作一个管道来转换布尔值，但这样做的唯一好处是确保您与状态字符串保持一致。
