离子4 leaveAnimation on modal.dismiss()

Question

我使用Ionic 4与自定义模式输入/离开动画。当在modalCtrl.create()上定义动画时，动画工作得很好。

根据我在我的应用程序的位置，我想使用不同的模式关闭动画。例如，Intro page -> Login -> Forgot password。取决于我从哪个页面导航到哪个页面，我希望使用不同的离开/输入动画。

我认为可以为定制的“离开”动画执行以下操作，但似乎leaveAnimation只在创建模式时才能工作，而不是在退出时才能工作。

是否有任何方法仅在modalCtrl.dismiss()上定义自定义动画？

this.modalCtrl.dismiss({
  leaveAnimation: this.animations.modalLeave
});

Answer 1

导入

import { Animation, AnimationController, ModalController } from '@ionic/angular';

模态创造与选择与动画

async showModal() {

    const leaveAnimation = (baseEl: HTMLElement, opts?: any): Animation => {
        const animationCtrl = new AnimationController();
        const fadeOut = animationCtrl.create()
            .addElement(baseEl)
            .duration(375)
            .keyframes([
               { offset: 0, opacity: '1' }, 
               { offset: 1, opacity: '0' }
             ])
            .iterations(1);

        return animationCtrl.create().addAnimation([fadeOut]);
    }

    const modal = await this.modalCtrl.create({
        ...
        leaveAnimation: leaveAnimation
    });

    await modal.present();
}

规格说明

Ionic CLI                     : 6.17.1 
Ionic Framework               : @ionic/angular 6.0.9
@angular-devkit/build-angular : 13.2.5
@angular-devkit/schematics    : 13.2.5
@angular/cli                  : 13.2.5
@ionic/angular-toolkit        : 6.0.0