angularjs - ionic 自定义模态动画

Question

ionic 模态自带slide-in-up的标准动画.是否可以将动画更改为fade-in ?

Answer 1

为了给 Ionic Modal 添加自定义转换，我们将使用 Ionic Modal Options enterAnimation和 leaveAnimationfrom模态选项接口(interface)。对于模态，有过渡状态:当我们关闭模态时，模态的 On Enter 和模态的 On Leave。如果您查看 Ionic Modal 选项界面，您会发现 2 个选项可以为两种状态添加动画。

export interface ModalOptions {
    showBackdrop?: boolean;
    enableBackdropDismiss?: boolean;
    enterAnimation?: string;
    leaveAnimation?: string;
    cssClass?: string;
}

我们将在模态中使用这些选项来指定我们使用 ionic-angular 中的 Animation 类创建的过渡类。 .因此，让我们看看我们如何一步一步地创建和自定义动画。

为进入和离开创建 2 个转换类:

on-enter-translate.transition.ts

import { Animation, PageTransition } from 'ionic-angular';
export class ModalTranslateEnterTransition extends PageTransition {
    public init() {
        const ele = this.enteringView.pageRef().nativeElement;
        const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
        wrapper.beforeStyles({ 'transform': 'translateX(100%);', 'opacity': 1 });
        wrapper.fromTo('transform', 'translateX(100%)', 'translateX(0)');
        wrapper.fromTo('opacity', 1, 1);
        this
            .element(this.enteringView.pageRef())
            .duration(500)
            .easing('cubic-bezier(.1, .7, .1, 1)')
            .add(wrapper);
    }
}

休假翻译.transition.ts

import { Animation, PageTransition } from 'ionic-angular';

export class ModalTranslateLeaveTransition extends PageTransition {

    public init() {
        const ele = this.leavingView.pageRef().nativeElement;
        const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
        const contentWrapper = new Animation(this.plt, ele.querySelector('.wrapper'));

        wrapper.beforeStyles({ 'transform': 'translateX(100%)', 'opacity': 1 });
        wrapper.fromTo('transform', 'translateX(0)', 'translateX(100%)');
        wrapper.fromTo('opacity', 1, 1);
        contentWrapper.fromTo('opacity', 1, 0);

        this
            .element(this.leavingView.pageRef())
            .duration(500)
            .easing('cubic-bezier(.1, .7, .1, 1)')
            .add(contentWrapper)
            .add(wrapper);
    }
}

然后将这些模块导入 app.module.ts

export class AppModule {
    constructor(public config: Config) {
        this.setCustomTransitions();
    }
    private setCustomTransitions() {
        this.config.setTransition('modal-translate-up-enter', ModalTranslateEnterTransition);
        this.config.setTransition('modal-translate-up-leave', ModalTranslateLeaveTransition);
    }
}

并使用以下选项创建模态:

var modal = this.modalCtrl.create(AddToCartModalPage, {
    productId: this.productId,
    skuId: this.skuId,
    zipcode: this.zipcode,
    sellerProfileId: this.sellerProfileId,
    branchId: this.branchId,
    changeSeller: this.changeSeller
}, {
    showBackdrop: false,
    enableBackdropDismiss: false,
    cssClass: 'add-to-cart-modal',
    enterAnimation: 'modal-translate-up-enter',
    leaveAnimation: 'modal-translate-up-leave'
});

在此处查找我的文章的更多信息:
Blog

在此处找到完整的演示存储库:
Github