angularjs – 离子自定义模态动画

为Ionic Modal添加自定义过渡我们将使用Ionic Modal Options enterAnimation和leaveAnimation来自ModalOptions界面.对于模态,有过渡状态：当我们关闭模态时,输入模态和模态的休假.如果您查看Ionic Modal选项界面,您将找到两个选项来为这两种状态添加动画.

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

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

为进入和离开创建2个过渡类：

在进入-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);
    }
}

在休假,translate.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%)','translateX(0)','translateX(100%)');
        wrapper.fromTo('opacity',1);
        contentWrapper.fromTo('opacity',0);

        this
            .element(this.leavingView.pageRef())
            .duration(500)
            .easing('cubic-bezier(.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