Question

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

Ionic 页面切换Native Page Transitions插件的安装(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 enterprise register --key=YOURPRODUCTKEY npm install @ionic-enterprise/native-page-transitions 

Ionic 页面切换Native Page Transitions插件支持的平台(Supported Platforms)

• Android
• iOS
• Windows Phone 8

Ionic 页面切换Native Page Transitions插件的用法(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);

}