Ionic 2 Modal animations and custom animations?

Ionic Framework ionic-v3
1

I’ve noticed that you can enter modalOptions for enterAnimation and leaveAnimation, but where can I find the list of allowable enterAnimations/leaveAnimations? Is it also possible to make my own enter/leave animations? Thanks.

2

Did you find any solution for this. I am too interested in custom animation for modals. Thanks

3

unfortunately not. I’ve seen somewhere that you can expand PageTransition but I’m not sure if it’s the same for modals.

4

@Ionize @vazad 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.

8 Likes
5

Wow thanks for this answer with complete example! This is very much appreciated! Thanks buddy!

6

Sure thing. I was a bit disappointed for not seeing any example of it, so here it is.

7

Please give me an idea how to change to to slide down animation?

8

Buddy, and the effect of back-drop? I’m using custom width, so the backdrop don’t appears and, if i put manualy, dont show the effect… can you help me?

9

I can’t help much without stackblitz or plunker-like link. My best suggestion would be opening the web inspector and debuggin your scripts, to make sure you’re doing everything as ionic api expects.

10

Very well explained my friend, thank you very much!!!

Only one question, when I do the dismiss with this.viewCtrl.dismiss() in the modal I see a blank screen for a few seconds, what would that be?

12

I’m sorry but I must reply the same to you. I can’t help much without stackblitz or plunker-like link. My best suggestion would be opening the web inspector and debuggin your scripts, to make sure you’re doing everything as ionic api expects.

13

Thanks a lot for your answer, I have solved this issue using PageTransition

14

Hi, where can I find all the documentation for modalController.create()? What are the other parameters you can pass in as options? It seems the docs are incomplete…
Basically I’m trying to make a modal draggable using a pan event and I want to be able to target the modal native element to set the absolute position. Would you know how to do this?

15

When docs are not sufficient or incomplete, you can always inspect your reference object through your browser. You’d be able to see properties and methods through object prototype. Another option would be to scrape ionic package under node_modules to get to know it through it’s source code.