Utilizing the greensock animation library to animate various components has presented a problem during the variable update within the onComplete function linked to a *ngIf. Strangely, Angular fails to recognize the variable update within the callback.
Desired outcome:
1. Click on the grey image.
2. The pink image fades out.
3. One of the grey images disappears.
Current behavior:
1. Click on the grey image.
2. The pink image fades out.
3. (No action occurs)
4. Repeat clicking on the grey image.
5. Finally, one of the grey images vanishes.
A relevant plunkr is available for reference...
declare var TweenMax; // Defined in index.html
@Component({
selector: 'my-app',
template: `
<img *ngIf="leftVisible" src="http://placehold.it/350x150" (click)="animate(-1)"/>
<img *ngIf="rightVisible" src="http://placehold.it/350x150" (click)="animate(1)"/>
<img #otherImage src="http://placehold.it/350x150/ff00ff/000000"/>
`,
})
export class App {
@ViewChild('otherImage') otherImageElement;
private leftVisible: boolean;
private rightVisible: boolean;
constructor() {
this.leftVisible = this.rightVisible = true;
}
private animate(_direction: number){
var tween = TweenMax.to(this.otherImageElement.nativeElement, 1, {
opacity: 0,
onComplete: () => {
console.log("Animation complete");
this.rightVisible = false;
}
}
};
}
The console confirms that the callback executes successfully and updates the variable, yet the element tied to the *ngIf does not alter until the grey images are clicked again.
How can I ensure proper updating within the onComplete callback?