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

Posted 2023-03-13

【中文标题】如何在 Ionic 3 中禁用模态动画？

【英文标题】：How to disable modal animations in Ionic 3?

【发布时间】：2018-05-08 12:36:46

【问题描述】：

我在一个不能很好地处理动画的旧系统上运行我的 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() 关闭模式时没有任何反应。但是，反复单击关闭按钮会关闭模式。 为什么？

【参考方案1】：

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

app.module.ts

IonicModule.forRoot(MyApp,  animate: false )

【讨论】：

正是我想要的！谢谢！

有人知道只有一种模式的解决方案吗？我想在模态显示期间禁用动画。谢谢

我可以只在模式关闭时禁用动画吗？

这没什么作用

【参考方案2】：

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

进入动画

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

离开动画

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