Modal transition effect

Question

Modal transition effect

Navigation

#1 by (0 votes)

0

Well, I have the following question, I have a ModalController when I'm running on iphones , the inbound transition comes from below to cover the fool's screen.

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

I'm trying to do 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 realized the documentation I have to pass options to the call, maybe in it I can do the effect I need, but as the documentation is poor I did not find anything about it.

apache-cordova ionic2 ionic3

asked by anonymous 25.08.2017 / 15:22

1 answer

Special character function: '=' in the method name My while closing before it really should

score 0 · Accepted Answer

I solved the problem by checking the code until I found the possible transitions. So I figured out what can be passed in% with% of the final code looks 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 be hint the class is this and these are the options that can be passed as a 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]