Ionic 5 + Angular: custom Alert enter and leave animations

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();
}
0 thoughts on “Ionic 5 + Angular: custom Alert enter and leave animations”

Leave a Reply

%d bloggers like this: