Page transition animations

Ionic Framework ionic-v3
8

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 for where you want to animate. It could be modal transition or page transition on nav. You can set ‘modal-scale-up-enter’ in your NavOptions’ animation field.

5 Likes