Native Page Transitions

Improve this doc

The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.

Repo: https://github.com/Telerik-Verified-Plugins/NativePageTransitions

Installation

1. Install the Cordova and Ionic Native plugins:
   

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

2. Add this plugin to your app's module

Supported platforms

• Android
• iOS
• Windows Phone 8

Usage

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

constructor(private nativePageTransitions: NativePageTransitions) { }

...


// example of adding a transition when a page/modal closes
ionViewWillLeave() {

 let options: NativeTransitionOptions = {
    direction: 'up',
    duration: 500,
    slowdownfactor: 3,
    slidePixels: 20,
    iosdelay: 100,
    androiddelay: 150,
    fixedPixelsTop: 0,
    fixedPixelsBottom: 60
   };

 this.nativePageTransitions.slide(options)
   .then(onSuccess)
   .catch(onError);

}


// example of adding a transition when pushing a new page
openPage(page: any) {

  this.nativePageTransitions.slide(options);
  this.navCtrl.push(page);

}

Instance Members

slide(options)

Perform a slide animation

flip(options)

Perform a flip animation

fade(options)

Platforms:iOS Android 

Perform a fade animation

drawer(options)

Platforms:iOS Android 

Perform a slide animation

curl(options)

Platforms:iOS 

Perform a slide animation

executePendingTransition()

Execute pending transition

cancelPendingTransition()

Cancel pending transition