I have an ionic 2 app with basic tabs.
<ion-tabs selectedIndex="1">
<ion-tab [root]="tab1Root" tabTitle="hunts" tabIcon="book"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="hunting" tabIcon="locate"></ion-tab>
</ion-tabs>
The tabs appears perfectly. But I would like to have a sliding animation when transitioning between tabs. That is, when I press the rightmost tab from the middle tab, middle tab should slide to left and rightmost tab should slide in from right. This is a basic android animation.
I am unable to find any details on how to accomplish this. Is this still not possible in Ionic (2.2.0) ?
Before starting
$ ionic cordova plugin add com.telerik.plugins.nativepagetransitions
$ npm install --save @ionic-native/native-page-transitions
Then import the plugin in your src/app/app.module.ts
the following way
import { NativePageTransitions } from '@ionic-native/native-page-transitions';
And add it as a provider.
providers: [
{provide: ErrorHandler, useClass: IonicErrorHandler},
StatusBar,
SplashScreen,
NativePageTransitions // <-- add me here
]
Go to your src/pages/tabs/tabs.ts
Import the plugin
import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions';
Add the plugin to the constructor
constructor(public navCtrl: NavController,
private nativePageTransitions: NativePageTransitions) {
}
Add these 2 variables
loaded: boolean = false;
tabIndex: number = 0;
Then add these two functions
private getAnimationDirection(index:number):string {
var currentIndex = this.tabIndex;
this.tabIndex = index;
switch (true){
case (currentIndex < index):
return('left');
case (currentIndex > index):
return('right');
}
}
public transition(e:any):void {
let options: NativeTransitionOptions = {
direction:this.getAnimationDirection(e.index),
duration: 250,
slowdownfactor: -1,
slidePixels: 0,
iosdelay: 20,
androiddelay: 0,
fixedPixelsTop: 0,
fixedPixelsBottom: 48
};
if (!this.loaded) {
this.loaded = true;
return;
}
this.nativePageTransitions.slide(options);
}
Then go to src/pages/tabs/tabs.html
Modify the ion-tabs tag the following way :
<ion-tabs (ionChange)="transition($event)">
or
<ion-tabs (ionSelect)="transition($event)">
Edit for Ionic 4
<ion-tabs (ionTabsWillChange)="transition($event)">
Enjoy.
PS: You can find the full code on my gist glemiere/58d1707ba82d40a55967601dbd0e72c9.
EDIT If you want to modify the animation, here are the all the informations you need. http://plugins.telerik.com/cordova/plugin/native-page-transitions