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

Question

我在旧系统上运行我的 Ionic 应用程序，该系统不能很好地处理动画，因此我尝试禁用它们。

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

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

似乎no-animation在这里没有效果。它实际上并不应用于任何 DOM 元素。或者是吗？

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

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

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

应用程序模块.ts

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