Ionic: Custom page transitions

Ionic: Custom page transitions

Default page transitions that you can find in out of the box Ionic framework does not always suits your needs. In some cases you may want to have custom page animations when ion-router-outlet navigates between pages. Let me share with you a very compact and elegant solution for the title topic.

Lets suppose that you want to add fade out effect to all page transitions in your Ionic application. The best place to customize animation for this purpose is ion-router-outlet. According to the Ionic documentation you can pass a custom function as the “animation” property of ion-router-outlet.

Edit app.component.html file and set “myCustomPageTransition” value as the animation property of ion-router-outlet.

<ion-app>
  <ion-router-outlet [animation]="myCustomPageTransition"></ion-router-outlet>
</ion-app>

Then edit app.component.ts file and create myCustomPageTransition property as is shown below. Please not that you can use both enteringEl and leavingEl in your animation.

import { Component } from '@angular/core';

import { AnimationController, Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
myCustomPageTransition = ((baseEl: any, opts?: any) => { 
    console.log("opts.enteringEl:"  + opts.enteringEl); //Entering Element - New Page
    console.log("opts.leavingEl:"  + opts.leavingEl);   //Leaving Element - Current Page
    var anim1 = this.animationCtrl.create()
      .addElement(opts.leavingEl)
      .duration(2000)
      .iterations(1)
      .easing('ease-out')
      .fromTo('opacity', '1', '0.0')
    var anim2 = this.animationCtrl.create()
      .addElement(opts.enteringEl)
      .duration(2000)
      .iterations(1)
      .easing('ease-out')
      .fromTo('opacity', '0.0', '1')
     var anim2 = this.animationCtrl.create()
      .duration(2000)
      .iterations(1)
      .addAnimation([anim1, anim2]);
    return anim2;
});

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private animationCtrl: AnimationController
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
}
At the end… May I ask you for something?

If I helped you solve your problem, please share this post. Thanks to this, I will have the opportunity to reach a wider group of readers. Thank You

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments