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
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'))
])