Simple class written in TypeScript to provide control over a Ionic 2+ Tabs component. Currently provides animation between view changes using Tabs on iOS and Android.

TabsControl.ts

/**********
TabsControl.ts
---------------
Simple class written in TypeScript to provide control over a Ionic 2+ Tabs component.
Currently provides animation between view changes using Tabs on iOS and Android.
---------------
Requires Ionic 2+ Tabs component and Cordova plugin NativePageTransition :
https://ionicframework.com/docs/api/components/tabs/Tabs/
https://ionicframework.com/docs/native/native-page-transitions/
---------------
More informations on my StackOverflow post :
https://stackoverflow.com/questions/42858415/animation-when-transition-between-tabs-in-ionic-2/44774422#44774422
**********/

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';

import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions';

@Injectable()
export class TabsControl {
  public  tabIndex      :number;
  private currentIndex  :number;
  private headerHeight  :number;

  constructor(
    public platform: Platform,
    private nativePageTransitions: NativePageTransitions
  ) {
    console.log('Hello TabsControl !');

    this.tabIndex     = 0;
    this.currentIndex = 0;
    this.headerHeight = 0;
  }

  /* Gives animation direction based on previous and current index. */
  public getAnimationDirection(index:number):string {
    this.currentIndex = this.tabIndex;
    this.tabIndex     = index;

    switch (true){
      case (this.currentIndex < index):
        return('left');
      case (this.currentIndex > index):
        return ('right');
    }
  }

  /* Set header size */
  public setHeaderHeight(height:number):void {
    this.headerHeight = height;
  }

  /* Animates view transitioning. */
  public pageTransition(direction:string):void {
    let options: NativeTransitionOptions = {
     direction:direction,
     duration: 250,
     slowdownfactor: -1,
     slidePixels: 0,
     iosdelay: 20,
     androiddelay: 0,
     fixedPixelsTop: this.headerHeight,
     fixedPixelsBottom: this.platform.is('ios') ? 48 : 56
    };

    this.nativePageTransitions.slide(options).then();
  }
}