CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic3
erikvimz
erikvimz

Reputation: 5476

How to disable modal animations in Ionic 3?

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?

Upvotes: 5

Views: 3241

Answers (2)

fedemz
fedemz

Reputation: 21

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 });

Upvotes: 2

Sampath
Sampath

Reputation: 65870

If you need to disable all the animations then:

app.module.ts

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

Upvotes: 4

Related Questions