Modal transition effect

Question

Well, I’m with the following doubt, I have a Modalcontroller when I’m running on iphones, the input transition comes from below to cover the fool screen.

With this library, can I change that transition? I need the transition to appear from the middle of the screen, this should happen the same way for Android phones, iPhone and Windows.

I’m trying to do it like this:

openModal() {
 let options: NativeTransitionOptions = {
  direction: 'down',
  duration: 500,
  slowdownfactor: 3,
  slidePixels: 20,
  iosdelay: 100,
  androiddelay: 150,
  fixedPixelsTop: 0,
  fixedPixelsBottom: 60
};

this.nativePageTransitions.slide(options);
  let myModal = this.modalCtrl.create(SlideAccessibility, null);
  myModal.present();
}

I noticed from the documentation that I have how to pass options for the call, maybe in it I can make the effect I need, but as the documentation is poor I did not find anything about.

Answer 1

I solved the problem, went to check the code until I found the possible types of transitions. So I found out what can be passed in options the final code was like this:

openModal() {
 let options: ModalOptions = {
  showBackdrop: false,
  enterAnimation: 'modal-md-slide-in',
  leaveAnimation: 'modal-md-slide-out',
};

this.nativePageTransitions.slide(options);
  let myModal = this.modalCtrl.create(SlideAccessibility, null, options);
  myModal.present();
}

To tip the class is this and these are the options that can be passed as parameter:

export interface ModalOptions {
  showBackdrop?: boolean;
  enableBackdropDismiss?: boolean;
  enterAnimation?: string;
  leaveAnimation?: string;
  cssClass?: string;
}

And these are the 4 types of possible transitions already preconfigured:

modal-slide-in [Refere ao efeito de ios, baixo para cima]
modal-slide-out [Refere ao efeito de ios, saida cima para baixo]
modal-md-slide-in [Refere ao efeito do android, meio para cima]
modal-md-slide-out [Refere ao efeito do android, cima para meio]