Improving page transitions in Ionic 2 apps

Better user experience using the Native Page Transitions cordova plugin

Posted by Alex Ferrer on 2 months ago

Four month ago I wrote my last post, and today I wake up with the energy to write a new one. In this case, I would like to share some new things I have learned about Ionic and I will talk about how to optimize page transitions animations using a cordova plugin.

The main objective of this post is to explain how to use this plugin and also to show some code of how I used it in my projects using good practices and in a clean and reusable way.

Last week, while I was working I noticed that navigation between pages was buggy in some points using the app with old and low range devices. To solve this kind of problems I found an interesting cordova plugin called Native Page Transitions which I had never tried before and it gave to my project an important improvement in page transition animations.

Source: Native Page Transitions

First of all, we will need to install the cordova plugin to our Ionic project. In my case (Ionic 2 project), I installed the plugin using the following commands explained in the Ionic documentation:

$ ionic cordova plugin add com.telerik.plugins.nativepagetransitions
$ npm install --save @ionic-native/native-page-transitions

Once we have the cordova plugin installed and the typescript/javascript interface installed using npm, we should add the plugin in our app.module.ts adding the following code:

...
import { NativePageTransitions } from '@ionic-native/native-page-transitions';
...
@NgModule({
  ...
  providers: [
    ...
    NativePageTransitions
    ...
  ]
  ...
})
export class AppModule { }

Now, that we have just installed it, we are able to call the plugin in all the components inside the Ionic application.

$ ionic g model Page

In this new class created inside the models folder /models/page.ts I defined a class which it will be used to extend our Ionic Pages.

import { NavController } from 'ionic-angular/navigation/nav-controller';
import { NativePageTransitions } from '@ionic-native/native-page-transitions';

export class Page {

    private isCached: boolean;
    private nativePageTransitions: NativePageTransitions;

    /**
    * Page Constructor
    * @param {NativePageTransitions} transitions
    */
    constructor(transitions: NativePageTransitions) {
        this.nativePageTransitions = transitions;
        this.isCached = false;
    }
    
    /**
    * Trigger native animation. If page is entering by default slide to left, if page is 
    * already created slide to right.
    * @param {string} enterPageDirection (Optional, default 'left')
    * @param {string} resumePageDirection (Optional, default 'right')
    */
    animateTransition(enterDirection?: string, resumeDirection?: string) {
       let resumeTransition = resumeDirection ? resumeDirection : 'right';
       let enterTransition = enterDirection ? enterDirection : 'left';
       // Resuming view transition if view was previously created
       if (this.isCached) {
            this.nativePageTransitions.slide({ 
                direction: resumeTransition, 
                iosdelay: 60, 
                androiddelay: 70, 
                slowdownfactor: 1 
            });
        }
        // Entering View transition if is created for first time
        else {
            this.nativePageTransitions.slide({ 
                direction: enterTransition, 
                iosdelay: 60, 
                androiddelay: 70, 
                slowdownfactor: 1
            });
            this.isCached = true;
        }   
    }
}

Now, we can extend any of the Ionic pages of the project using this class. It's important to call with super() the parent class constructor and pass the correct required parameters to it. Next, we only need to call the animateTransition method in the ionViewWillEnter() event method in the IonicPage class.

import { NativePageTransitions } from '@ionic-native/native-page-transitions';

@IonicPage()
@Component({
  templateUrl: 'home.html'
})
export class HomePage extends Page {
  
  constructor(public navCtrl: NavController, 
     private nativePageTransitions: NativePageTransitions) {
     // Call superclass constructor
     super(nativePageTransitions);
  }

  ionViewWillEnter() {
    // Entering/resume view transition animation
    this.animateTransition();
  }
}

To test the code just compile your app to one of the platforms and deploy it to a real device:

$ ionic cordova run android
OR
$ ionic cordova run ios

Finally, the Ionic application will use native transitions when the view loads. Also, if we need to disable Ionic default animations to only use the native transitions we can push views disabling them:

this.navCtrl.push('NextPage', {}, { animate: false });

Or we can disable all animations for all the Ionic application doing the folliwing in the app.component.ts file:

...
 imports: [
        ...
        IonicModule.forRoot(MyApp, {
            animate: false // disable animations in all application
        }),
        ...
]
...

I hope this could help any Ionic developer to make their projects a bit better. My main goal here is to share my experiences and the learned stuff about Ionic to improve my english writing this kind of posts.

Thanks for reading my blog.

Share this post!