Since it’s hard to find an example in the documentation and elsewhere on the Internet, here’s a simple implemention of a custom fade-in animation for Ionic 5 alerts with Angular. Note that we choose what elements of an ion-alert to animate by using querySelector on HTMLElement baseEl. The div with class alert-wrapper is the dialog, but you can also query select ion-backdrop for the backdrop.
constructor(
private alertCtrl: AlertController,
private animationCtrl: AnimationController
) {
}
private async showAlert() {
const alert = await this.alertCtrl.create({
message: 'Hello world',
enterAnimation: (baseEl: any, opts?: any) => {
return(this.animationCtrl
.create()
.addElement(baseEl.querySelector('.alert-wrapper'))
.duration(250)
.keyframes([
{ offset: 0, opacity: '0' },
{ offset: 1, opacity: '1' }
]));
}
});
await alert.present();
}
