Native Page Transitions

Improve this doc

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

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

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.

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>

API

Native

General