angular - Hur man inaktiverar modalanimationer i Ionic 3?

Jag kör min Ionic-app på ett äldre system som inte hanterar animationer så bra, så jag försöker stänga av dem.

Jag har försökt att sätta opts när jag skapar modal till:

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

och det verkar som att no-animation inte har någon effekt här. Det tillämpas bokstavligen inte på något DOM-element. Eller gör det det?

När jag diagnostiserade märkte jag att Ionic tillämpar inline-CSS på .content när modalen håller på att öppnas eller stängas:

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

så jag försökte åsidosätta dem med 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;
            }
        }
    }
}

Nu visas modalen utan några animationer. Ett problem uppstår - när man stänger modalen med viewController.dismiss() händer ingenting. Att klicka upprepade gånger på stängningsknappen stänger dock modalen. Varför?

Svar #1

Om du behöver inaktivera alla animationer då:

app.module.ts

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

Svar #2

För att inaktivera animationer på en specifik modal (Ionic 3):

inträdesanimation

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

lämnaAnimation

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

Relaterade artiklar