离子自定义模态动画 [英] Ionic custom modal animation

问题描述

离子模态带有滑入式的标准动画。是否可以将动画更改为淡入？

Ionic modal comes with the standard animation of slide-in-up. Is it possible that we can change the animation to fade-in?

推荐答案

为了为离子模态添加自定义过渡，我们将使用离子模态选项 enterAnimation 和 leaveAnimationfrom ModalOptions界面。对于模态，有过渡状态：关闭模态时，在进入模态时和在离开模态时。如果您查看Ionic Modal选项界面，则会找到2个用于为两个州添加动画的选项。

In order to add custom transitions for Ionic Modal We will be using Ionic Modal Options enterAnimation and leaveAnimationfrom ModalOptions interface. For a modal there are transition states: On Enter of modal and and On Leave of modal when we close it. If you look at the Ionic Modal options interface you will find 2 options to add animations for both the states.

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

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

We will use these options in modal to specify transition class we create using Animation class from ionic-angular. So lets see how we can create and custom animations step by step.

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

Create 2 transition classes for enter and leave:

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);
    }
}

on-leave-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%)', '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);
    }
}

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

And create modal using following options:

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'
});

在此处查找我的文章的更多信息：
博客

Find more information my article here: Blog

在此处查找完整的演示存储库：
Github

Find complete demo repository here: Github

这篇关于离子自定义模态动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！