Adding custom transitions/custom modal transition

Ionic Framework ionic-v3
3

@ccdex_chris @badpenguin I just created 2 custom transitions for my modals and it works like a charm.

First, you need to create your transition classes.

scale-up-enter.transition.ts

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

export class ModalScaleUpEnterTransition extends PageTransition {

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

    wrapper.beforeStyles({ 'transform': 'scale(0)', 'opacity': 1 });
    wrapper.fromTo('transform', 'scale(0)', 'scale(1.0)');
    wrapper.fromTo('opacity', 1, 1);

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

scale-up-leave.transition.ts - I want to point leavingView/enteringView difference out here.

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

export class ModalScaleUpLeaveTransition 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': 'scale(0)', 'opacity': 1 });
    wrapper.fromTo('transform', 'scale(1)', 'scale(5.0)');
    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);
}
}

Then introduce your transition classes to ionic, by using Config. I did it on AppModule but you can basically do it anywhere.

app.module.ts

import { Config } from 'ionic-angular';

export class AppModule {
    constructor(public config: Config) {
        this.setCustomTransitions();
    }

    private setCustomTransitions() {
        this.config.setTransition('modal-scale-up-leave', ModalScaleUpLeaveTransition);
        this.config.setTransition('modal-scale-up-enter', ModalScaleUpEnterTransition);
    }
}

FInally set the transition name that you introduced to your modal definition.

your-page.component.ts

public presentYourModal() {
    const yourModal = this.modalController.create(YourModalComponent, { userId: 46 }, {
        showBackdrop: false,
        enableBackdropDismiss: false,
        enterAnimation: 'modal-scale-up-enter',
        leaveAnimation: 'modal-scale-up-leave'
    });
    yourModal.present();
}

That’s it!

It’s a pity that I had to go through ionic’s implementation of basic 2 transitions to understand how this works. Even enterAnimation and leaveAnimation options are not visible for modalOptions doc on ionic site. A final note for the internet: by the time I’m writing this, it’s ionic 3 and angular 4.

16 Likes