如何在 Ionic 3 中禁用模态动画？

Question

我在一个不能很好地处理动画的旧系统上运行我的 Ionic 应用程序，所以我正在尝试禁用它们。

我尝试在创建模式时将opts 设置为：

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

似乎no-animation 在这里没有任何作用。它实际上并不适用于任何 DOM 元素。 是吗？

在诊断时，我注意到 Ionic 在模态即将打开或关闭时将内联 CSS 应用于 .content：

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

所以我尝试使用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;
            }
        }
    }
}

现在模态显示没有任何动画。出现了一个问题 - 使用 viewController.dismiss() 关闭模式时没有任何反应。但是，反复单击关闭按钮会关闭模式。 为什么？

Answer 1

如果您需要禁用所有动画，则：

app.module.ts

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

Answer 2

用于禁用特定模式上的动画(Ionic 3)：

进入动画

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

离开动画

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