I’m building out a component that animates when a class is added to or removed from it. When the class is added it animates fine, but when the class is removed the animation doesn’t occur until some other interaction within Angular’s zone (like a button click) occurs.
It looked like a pretty typical zone issue so I tried running the update inside of NgZone but that didn’t fix the issue - can anyone spot what might be wrong?
<div class="flip-container" (click)="flip()" [class.hover]="flipped">
<div class="flipper">
<div class="front">
<ng-content select=".flash-card-front"></ng-content>
</div>
<div class="back">
<ng-content select=".flash-card-back"></ng-content>
</div>
</div>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'flash-card',
templateUrl: 'flash-card.html'
})
export class FlashCardComponent {
flipped: boolean = false;
constructor() {
}
flip(){
this.flipped = !this.flipped;
}
}