Native Page Transitions

Contents

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.

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

Stuck on a Cordova issue?

Don't waste precious time on plugin issues.

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic's experts offer official maintenance, support, and integration help.

Installation

Community Enterprise

ionic cordova plugin add com.telerik.plugins.nativepagetransitions

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

Ionic EE comes with fully supported and maintained plugins from the Ionic Team. Learn More or Contact Us

ionic activate-native-ee --key=YOURPRODUCTKEY

ionic integrations add @ionic-native/native-page-transitions

Supported Platforms

Android
iOS
Windows Phone 8

Usage

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

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);

}