How to add tab animation on change in Ionic 4?

Question

I want to add navigate forward and backward animation on tab switches.

I want to replicate the current state of Facebook's app tab navigation animations.

I have currently tried adding a method onto the individual tab to call a function that calls navigate forward.

<ion-tab-bar slot="bottom">
  <ion-tab-button (click)="goToListTab()" mode="md">
    <ion-icon name="list"></ion-icon>
    <ion-label>Orders</ion-label>
  </ion-tab-button>

  <ion-tab-button (click)="goToNewTab()" mode="md">
    <ion-icon name="add"></ion-icon>
    <ion-label>New Order</ion-label>
  </ion-tab-button>

  <ion-tab-button (click)="goToAccountTab()" mode="md">
    <ion-icon name="person"></ion-icon>
    <ion-label>Account</ion-label>
  </ion-tab-button>
</ion-tab-bar>

and my .ts file has the functions that call navigate. I included only one to simplify.

goToAccountTab() {
    this.router.navigateBack('/tabs/account');
}

On goToAccountTab I expected it to navigate to the account tab with the navigateBack animation, but it successfully goes to the account tab but does not perform the navigateBack animation.

Answer 1

the way ionic does that is by using the native page transitions plugins which is no longer maintained and you got a bug that I wasn't able to fix (when doing the animation, you see twice the pages) but it's the best solution I found until know, since Ionic didn't do it properly (for the moment).

So, I let the code here, it's could help and maybe you'll found the fix ;)

1. Run

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

2. Import into the app.module.ts

import { NativePageTransitions } from '@ionic-native/native-page-transitions/ngx'

@NgModule({
  imports: [
    NativePageTransitions,
  ]
}

3. add to your tabs.page.ts the animation logic

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

export class TabsPage {
loaded: boolean = false
tabIndex: number = 0

constructor(private nativePageTransitions: NativePageTransitions) {

  //Look the index to see which direction to go (if you have more than 3 tabs)
  private getAnimationDirection(e: any): string {
    var currentIndex = this.tabIndex

    this.tabIndex = e.index
    // or 
    // this.tabIndex = Object.keys(this.tabs).indexOf(e.tab)

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

  transition(e: any): void {
    let options: NativeTransitionOptions = {
      direction: this.getAnimationDirection(e),
      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)
  }
}

4. and inside the tabs.page.html

<ion-tabs (ionTabsWillChange)="transition($event)">
 /*...*/
</ion-tabs>

note:
1. for me, $event gave me back an object like that {tab: 'home'}, since I was creating the tabs with a loop trough an array of tabs, i could find the index with Object.keys(tabs).indexOf($event.tab)
2. I also tried to use a simple angular route animation, but since ionic wrap the logic inside the ion-tabs, it doesn't seems to work