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
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.
Should be set ‘enterAnimation’ in 3rd parameter:
let loginModal = this.modalCtrl.create(‘LoginModal’, {}, {
enterAnimation: ‘modal-scale-up-enter’,
leaveAnimation: ‘modal-scale-up-leave’
});
public init() {
super.init(); //<--- add this
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!
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
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!!
It looks as if setTransition
has gone out the window so far in Ionic 4 (beta 8). Anyone know of a workaround?
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
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();
}