Fade in fade out animation by css in ionic 2 | ionic 3 | ionic 4 | angular2 | angular4

Use below code in your SCSS file :

.fadein-out-border{ transition: 1s ease-in-out all;}

Code for your HTML Template File :

 <p [ngClass]=“showData?’fadein-out-border’:””> Data will hide by fade in / fade out</p>

Here you need to manage "showData" as a dynamic variable in TS file, Which will we true and false based on your condition. So when it goes true or false you can see CSS effect.