How to disable modal animations in Ionic 3?

user_381802 0
Viewed 2658

I'm running my Ionic app on an older system that doesn't handle animations that well, so I'm trying to disable them.

I've tried setting opts when creating modal to:

{
    cssClass: 'plain-modal',
    enableBackdropDismiss: false,
    enterAnimation: 'no-animation',
    leaveAnimation: 'no-animation',
    showBackdrop: true
}

and it seems that no-animation has no effect here. It is literally not applied to any DOM element. Or is it?

While diagnosing I've noticed that Ionic applies inline CSS to .content when modal is about to be opened or closed:

transform: translateX(100%);
will-change: transform, -webkit-transform;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1);

so I tried overriding those using initial !important:

.show-page.plain-modal {
    > ion-backdrop {
        opacity: 0.5; // Nothing is displayed if I don't do this
    }

    > .modal-wrapper {
        opacity: 1; // Again nothing is displayed if I don't do this

        > .ion-page {
            > .content {
                // Override Ionic animation styles
                transform: initial !important;
                will-change: initial !important;
                transition-duration: initial !important;
                transition-timing-function: initial !important;
            }
        }
    }
}

Now the modal shows up without any animations. A problem rises - when closing the modal using viewController.dismiss() nothing happens. Repeatedly clicking on the close button however does close the modal. Why?

ionic3 ionic-framework angular typescript
2 Answers

If you need to disable all the animations then:

app.module.ts

IonicModule.forRoot(MyApp, { animate: false })
user_10773090

For disabling animations on a specific modal (Ionic 3):

enterAnimation

this.modalCtrl.create(MyModal).present({ animate: false });

leaveAnimation

this.viewCtrl.dismiss(null, null, { animate: false });
user_139719290
Related