How to disable modal animations in Ionic 3?

Question

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?

Answer 1

If you need to disable all the animations then:

app.module.ts

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