Change Detection Issue with Animation

Ionic Framework ionic-v3
1

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;
  }

}
2

hi josh…im one of your super fan of your blog post…please keep your hardwork going :D…im running to the same issue previously so i just left aside…willnig to know how can i run some function after the animation had completed…i search a lot on internet but most of it is using JQuery

1 Like