How to make transition when expression change

Are there any way to make transition when expression was change

This my html code. I want to make transition of the <div class="fadeIn">{{ phrase }}</div> when expression change ( {{ phrase }} )

<div class="fadeIn">{{ phrase }}</div> /*I use animate.css framework*/
<button ion-button (click)="previous()">Previous</button>
<button ion-button (click)="next()">Next</button>

TypeScript file

import { Component, OnInit } from '@angular/core';

export class RecipePage implements OnInit{

  phrase: string;
  ngOnInit() { this.phrase = "Hi"; }
  next() { this.phrase = "Next phrase"; }
  previous() { this.phrase = "Previous phrase"; }

when I click button the text was change but the animation not working because I use typescript to change the text this.phrase = "here";

Are there way to make transition when expression was change by typescript


maybe in html

<div [className]='mycssclasses'></div>

and in ts you set the variable mycssclasses, that contains a string representing your css classes that you want apply like

case 'Bibbidi-Bobbidi-Boo':
this.mycssclasses = 'fadein cinderella';
case 'avadaKedavra':
this.mycssclasses = 'fadeout askaban';

What not working is, to make the same class again to trigger a new animation. You must a apply a different css class, maybe the most magical

Best regards, anna-liebt