Ionic Native Page Transitions for iOS and Android [v3]

20 Shares

The standard Ionic page transitions already look very decent compared to older Cordova apps from some years ago. However, if you want some more typical native animations for your transitions there’s an easy way to get awesome truly native page transitions within your Ionic app.

In this Quick Win we will use the Native Page Transitions plugin which allows to use different native animations instead of the regular ones.

Setup our App

We start with a blank new Ionic app, create 2 pages and install the needed Cordova plugin and the NPM package so go ahead and run:

ionic start nativeTransitions blank
cd nativeTransitions
ionic cordova plugin add com.telerik.plugins.nativepagetransitions
npm install --save @ionic-native/native-page-transitions
ionic g page home
ionic g page second

ionic start nativeTransitions blank

cd nativeTransitions

ionic cordova plugin add com.telerik.plugins.nativepagetransitions

npm install --save @ionic-native/native-page-transitions

ionic g page home

ionic g page second

To make use of the plugin we need to add it to our module, therefore open the src/app/app.module.ts and change it to:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

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

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    NativePageTransitions,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

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

@NgModule({

declarations: [

MyApp

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp

providers: [

StatusBar,

SplashScreen,

NativePageTransitions,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

That’s all we need for the setup! Remember that we are now using a Cordova plugin and have to test the animations on a real device or simulator, the browser won’t work in this case!

Using Native Page Transitions

For our example of the different transitions we don’t need a lot. The first view only contains a bunch of buttons so we can test the animations, so go ahead and change your src/home/home.html to:

<ion-header>
  <ion-navbar>
    <ion-title>
      Transitions
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button full (click)="slidePage()">Slide</button>
  <button ion-button full (click)="flipPage()">Flip</button>
  <button ion-button full (click)="fadePage()">Fade</button>
  <button ion-button full (click)="curlPage()">Curl</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Transitions

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button full (click)="slidePage()">Slide</button>

</ion-content>

As I said, really boring so far. Far more interesting is the according class!

To make us of the new transitions, we need to craft some options and call a specific transition we would like to have whenever we push a new page or set the root of our view.

The different animations are:

Slide: Slide in the next view, almost like it looks normally but a bit more native or Material design like
Flip: Flip over the page, a very classic animation but not used that much today
Fade: Fade in the next page, a very good looking animation for some places
Curl: Like rolling up a page from a book

With the according actions for our buttons we implement all of these, for some we also define additional options which you can check out on the official Cordova plugin page.

For some animations this examples uses setRoot instead of push because some the transitions were a bit mixed and the results were not so good looking. Just try different options with this example to see what works for you!

For now, open your src/pages/home/home.ts and insert:

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private nativePageTransitions: NativePageTransitions) {

  }

  slidePage() {
    let options: NativeTransitionOptions = {
      direction: 'left',
      duration: 400,
      slowdownfactor: -1,
      iosdelay: 50
     };

    this.nativePageTransitions.slide(options);
    this.navCtrl.setRoot('SecondPage');
  }

  flipPage() {
    let options: NativeTransitionOptions = {
      direction: 'up',
      duration: 600
     };

    this.nativePageTransitions.flip(options);
    this.navCtrl.push('SecondPage');
  }

  fadePage() {
    this.nativePageTransitions.fade(null);
    this.navCtrl.setRoot('SecondPage');
  }

  curlPage() {
    let options: NativeTransitionOptions = {
      direction: 'up',
      duration: 600
     };
    this.nativePageTransitions.curl(options);
    this.navCtrl.setRoot('SecondPage');
  }
}

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

import { NavController, IonicPage } from 'ionic-angular';

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

@IonicPage()

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController, private nativePageTransitions: NativePageTransitions) {

}

slidePage() {

let options: NativeTransitionOptions = {

direction: 'left',

duration: 400,

slowdownfactor: -1,

iosdelay: 50

};

this.nativePageTransitions.slide(options);

this.navCtrl.setRoot('SecondPage');

}

flipPage() {

let options: NativeTransitionOptions = {

direction: 'up',

duration: 600

};

this.nativePageTransitions.flip(options);

this.navCtrl.push('SecondPage');

}

fadePage() {

this.nativePageTransitions.fade(null);

this.navCtrl.setRoot('SecondPage');

}

curlPage() {

let options: NativeTransitionOptions = {

direction: 'up',

duration: 600

};

this.nativePageTransitions.curl(options);

this.navCtrl.setRoot('SecondPage');

}

Now we just need the actual second page to go back, so open the src/pages/second/second.html and change it to:

<ion-header>
  <ion-navbar>
    <ion-title>Second</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button full (click)="goBack()">Go back</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>Second</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

Again we use some animations to go back, but those are more or less the same with just a few parameters changed. Therefore, change your src/pages/second/second.ts to:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions';

@IonicPage()
@Component({
  selector: 'page-second',
  templateUrl: 'second.html',
})
export class SecondPage {

  constructor(public navCtrl: NavController, private nativePageTransitions: NativePageTransitions) {
  }

  goBack() {
    if (this.navCtrl.canGoBack()) {
      let options: NativeTransitionOptions = {
        direction: 'down',
        duration: 500,
        slowdownfactor: -1,
        slidePixels: 20,
      };

      this.nativePageTransitions.slide(options);
      this.navCtrl.pop();
    } else {
      let options: NativeTransitionOptions = {
        duration: 700
      };
      this.nativePageTransitions.fade(options);
      this.navCtrl.setRoot('HomePage');
    }
  }

}

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

import { IonicPage, NavController, NavParams } from 'ionic-angular';

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

@IonicPage()

@Component({

selector: 'page-second',

templateUrl: 'second.html',

})

export class SecondPage {

constructor(public navCtrl: NavController, private nativePageTransitions: NativePageTransitions) {

}

goBack() {

if (this.navCtrl.canGoBack()) {

let options: NativeTransitionOptions = {

direction: 'down',

duration: 500,

slowdownfactor: -1,

slidePixels: 20,

};

this.nativePageTransitions.slide(options);

this.navCtrl.pop();

} else {

let options: NativeTransitionOptions = {

duration: 700

};

this.nativePageTransitions.fade(options);

this.navCtrl.setRoot('HomePage');

}

Now you can play around with your native transitions, and remember: This will only work on a device!

Inside your browser you won’t see these animations as the plugin is not available which uses the native SDKs for iOS and Android to achieve the animations.

What’s your favorite animation?

You can also find a video version of this Quick Win below!

Ionic Academy | Learn Ionic

Ionic Native Page Transitions for iOS and Android [v3]

Setup our App

Using Native Page Transitions

Comments on Ionic Native Page Transitions for iOS and Android [v3]

Leave a Reply Cancel reply