Angular 2 Animation - boolean trigger?
Solution 1
- 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.
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'))
])
Solution 2
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:
get somePropertyStr():string {
return this.someProperty.toString();
}
Then you should bind your animation to that somePropertyStr
property.
Once again, this is an ugly workaround, best thing would be able to use the boolean value.
Solution 3
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?
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.
Related videos on Youtube
Comments
-
Steven Yates almost 2 years
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:
<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
someProperty
changes.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?
-
Steven Yates over 7 yearsThis seems to be a great work around but I'd love some response from the angular 2 team. Thank you
-
user3587412 about 7 yearsFor those seeing this answer in 2017: Since Angular 4.0.1, you will need to use
state('1', ...
andstate('0', ...)
instead ofstate('true', ...)
andstate('false', ...)
-
wodzu about 7 years
state('0',...)
I spent hours to get that damn thing to work. thanks for the hint! -
Cole Garstin almost 7 yearsI had the same issue with using hyphens in my state name. Changing the state name to camelCase fixed my issue.
-
Nico Van Belle over 6 yearsI was lucky enough to stumbled upon this pull request so I saved myself a couple of hours of banging my head into a wall.
-
philipooo over 6 yearsThere is a change on its way in angular 5.0.0-rc.2 github.com/angular/angular/blob/master/…
-
Josh Leslie almost 5 yearsGreetings from 2019! This has been fixed. boolean-value-matching