CODEWITHSUNDEEP
angularionic-framework
Andrew
Andrew

Reputation: 401

Changing the duration of the default Ionic Modal animation

I have a page with a basic Ionic Modal inside. Everything works fine, but I want it to slide in/out slower than by default. Is it possible to make it happen without creating custom animations etc; in some easier way? It is not necessary to change any other options, just want the easiest way to edit the existing ones.

The only difference from the default modal is a CSS class I applied to it:

TS

async openModal() {
  const modal = await this.modalController.create({
    component: PlanBreakdownPage,
    cssClass: 'breakdown-modal-css'
  });
  return await modal.present();
}

CSS

.breakdown-modal-css .modal-wrapper {
  height: 95%;
  top: 5%;
  position: absolute;
  display: block;
}

Upvotes: 1

Views: 1114

Answers (1)

EinfachHans
EinfachHans

Reputation: 255

First: Why you would like to change that? The Ionic Team creates all the Stuff to match the native Appearance.

If you really want to change it, you should have a look at the original Animations. You can see them here: https://github.com/ionic-team/ionic/tree/master/core/src/components/modal/animations

You can copy these and create your own Animation with a custom Duration. Than you can use these while create the Modal in the ModalController.

Upvotes: 2

Related Questions