Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

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

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

Param Type Details
options NativeTransitionOptions

Options for the transition

Returns: Promise<any>

flip(options)

Perform a flip animation

Param Type Details
options NativeTransitionOptions

Options for the transition

Returns: Promise<any>

fade(options)

Platforms:iOS Android 

Perform a fade animation

Param Type Details
options NativeTransitionOptions

Options for the transition

Returns: Promise<any>

drawer(options)

Platforms:iOS Android 

Perform a slide animation

Param Type Details
options NativeTransitionOptions

Options for the transition

Returns: Promise<any>

curl(options)

Platforms:iOS 

Perform a slide animation

Param Type Details
options NativeTransitionOptions

Options for the transition

Returns: Promise<any>

executePendingTransition()

Execute pending transition

Returns: Promise<any>

cancelPendingTransition()

Cancel pending transition

Returns: Promise<any>

API

Native

General