angular - 如何在 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 })