Adding custom transitions/custom modal transition

The solution provided by @onderceylan works very well. I tested with Ionic 3 in the iOS simulator.

Small question: how to dismiss the view, when I use
this.viewCtrl.dismiss();
it doesn’t have any animation at all

@dranix I’m doing the same and it works fine for me. It sounds like your leaveAnimation doesn’t work as expected. Did you pay attention on leavingView? Debugging on your leave transition class would help.

@onderceylan you’re right. It works perfectly. Thank a bunch :smiley:

1 Like

Should be set ‘enterAnimation’ in 3rd parameter:

let loginModal = this.modalCtrl.create(‘LoginModal’, {}, {
enterAnimation: ‘modal-scale-up-enter’,
leaveAnimation: ‘modal-scale-up-leave’
});

  1. “super.init();” should run in first line of each transition’s init, or the modal content may in wrong position.
public init() {
   super.init(); //<--- add this

  1. Custom transition don’t support the default option “showBackdrop: false”. Backdrop will always show.

Checked “Backdrop” show/hide logic is on the template, not one the code:

Any idea how to fix?

Hi, can you help me out… how to change your code so that the animation slides from right to left like a sliding menu ?

Hey, you can inspect ionic’s source code. There’s those animations as far as I know.

Hello guys, on the same topic here.
I am using this.view.dismiss() on a page which is not a modal, and it closes with slide-to-right transition for me.
I how can i make the default slide-to-bottom, on this.view.dimiss(). I see that you mentioned above on leaveAnimation, but i am not sure how to make it out.

I was having a weird issue with the screen popping on dismiss. I changed a line on the scale-up.leave.transition.ts to fix this.

wrapper.fromTo('transform', 'scale(1)', 'scale(5.0)');

to

wrapper.fromTo('transform', 'scale(1)', 'scale(0)');

It started performing as expected.

Hope this helps someone!

3 Likes

Thank you, I was able to change popover transition using your instructions. Except popover does not have options to change transitions per instance, so you need to set it globally for whole app in config.

Maybe this can help for those who wants to set transition for all modals, or popovers… etc
Here is how you can set transitions:

I have just used

	popoverEnter: 'custom-popover-pop-in',
      	popoverLeave: 'custom-popover-pop-out',

where

  this.config.setTransition('custom-popover-pop-in', CustomPopoverPopIn )
  this.config.setTransition('custom-popover-pop-out', CustomPopoverPopOut )

same as @onderceylan described for modal transitions

Happy coding :wink:

and the backdrop? i’m using modal with custom width… so, the backdrop don’t follows the same effect… how can i add him?

Thanks a lot, you helped me for sure!! :hugs:

It looks as if setTransition has gone out the window so far in Ionic 4 (beta 8). Anyone know of a workaround?

@jbgomez21 was able to build a custom animation in Ionic v4 / Angular v6:

This appears to be only for modals. Do you have any examples for page transitions for Ionic 4?

Nope. While migrating I choose an easier path, no more custom modal but popover instead

I am also looking for ionic 4 page transitions

Hii @onderceylan Will it work in ionic 4 ?

With Ionic5 a really simple way to customize your modal transitions:

Step 1: create the animations you want for the modal

import { createAnimation } from '@ionic/core';


export const modalEnterAnimation = () => createAnimation()
  .addElement(document.querySelector('.modal-wrapper'))
  .duration(500)
  .fromTo('top', '-350px', '0px');  //add any animation here

export const modalLeaveAnimation = () => createAnimation()
  .addElement(document.querySelector('.modal-wrapper'))
  .duration(500)
  .fromTo('top', '0px', '-350px'); //add any animation here


Step 2: create the modal itself and add the animations

  async openAppBanner() {
    const modal = await this.modalCtrl.create({
      component: AppBannerComponent,
      showBackdrop: false,
      enterAnimation: modalEnterAnimation,
      leaveAnimation: modalLeaveAnimation
    });
    await modal.present();
  }
1 Like