Page transition animations

Ionic Framework ionic-v3
1

Is it possible to change the animation in which pages transition in ionic2? For instance instead of the slide say I wanted a fade, is this possible?

4 Likes
2

At the moment, no, this is not exposed in nav.push.

We do however want to be able to allow for this and expand on our animations with custom animations that users can define.

1 Like
3

Thanks for the answer!

4

I’m looking forward to this.

But for circumstance, I want to achieve things like showing a smaller view on top of the current page. It shows properly with css help from this. But the background is all black due to the previous screen has completely slid.

5

Ohh I got it working. Please don’t mind my scenario in my previous comment. It should not show like that after firstly transitioned into a new page.

I got it working via ModalController with above css on modal page.

6

Hi,

Any news about page transitions customization ?

3 Likes
7

Yes, any updates on animated page transitions for ionic2?

3 Likes
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
9

Hi @onderceylan
Thank you for sharing this code!
When I follow you step by step and call a page with on or the other animation, I end up with a black screen.
Do you know why is that ?
Here is what I do to use the animation :

this.navCtrl.push("MyPage",{},{animate: true, animation:'modal-scale-up-enter'});

10

I can’t help much without stackblitz or alike 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.

11 
fadePage()
  {
    let options:any={
      duration:1400,
      type:'fade',
    }

    this.nativePageTransitions.fade(options);
      this.router.navigateByUrl('/aboutus');
  }

Created a demonstration at
//Ionic 6 angular Page transitions : slide, flip, drawer, curl, fade - YouTube