Hey everyone, I am looking for a way to add a custom modal transition. I’d like to have certain modals (not all modals) to be the full width of the viewport and slide up from the bottom, taking only 50% of the vertical viewport. I believe to achieve this, I need to create a new transition and regi…

@ccdex_chris @badpenguin I just created 2 custom transitions for my modals and it works like a charm. First, you need to create your transition classes. scale-up-enter.transition.ts import { Animation, PageTransition } from 'ionic-angular'; export class ModalScaleUpEnterTransition extends PageTr…

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:

[image] Tugsbileg: let loginModal = this.modalCtrl.create(‘LoginModal’, { enterAnimation: ‘modal-scale-up-enter’, leaveAnimation: ‘modal-scale-up-leave’ }); Should be set ‘enterAnimation’ in 3rd parameter: let loginModal = this.modalCtrl.create(‘LoginModal’, {}, { enterAnimation: ‘modal…

“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 Custom transition don’t support the default option “showBackdrop: false”. Backdrop will always show. Checked “Backdrop” show/hide log…

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 ma…

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 some…

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 He…

Adding custom transitions/custom modal transition

Ionic Framework ionic-v3

reedrichards September 12, 2018, 5:24am 23

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

Topic		Replies	Views
Ionic 2 Modal animations and custom animations? ionic-v3	13	10135	June 20, 2018
How to migrate custom animation to Ionic 4? Ionic Framework	5	5536	July 19, 2021
Page transition animations ionic-v3	10	11186	February 2, 2023
Custom Modal Transition? ionic-v3	6	2465	January 21, 2018
Page Transitions top to bottom ionic-v3	3	3060	May 30, 2017

Adding custom transitions/custom modal transition

Related topics