ionic-frameworkionic2

Animation when transition between tabs in Ionic 2


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


Solution

  • 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