Page Transition Animation in Ionic 2

Question

I have simple tabs template Ionic 3 application in which, I am switching between the tabs whenever user swipes on view based on left or right I am switching between Tabs and

Answer 1

Late answer but may be useful for future users. You can achieve transition animation by this code. This question title & description is different. So I'm posting answer for title

goTo(page, params) {  //params are optional leave blank {} if you are not sending data
    this.navCtrl.push(page, { params: params }, { animate: true, animation: 'transition', duration: 500, direction: 'forward' });
}

goBack(){
    this.navCtrl.pop({animate:true,animation:'transition',duration:500,direction:'back'});
}

Note- If you are BackButton in Navbar do this

import {ViewChild } from '@angular/core';
import { Navbar } from 'ionic-angular';  

//create global variable
@ViewChild(Navbar) navBar: Navbar;

//inside ionViewDidLoad override back button
ionViewDidLoad() {
console.log('ionViewDidLoad ProductPage');
this.navBar.backButtonClick = (e: UIEvent) => {
        // todo something
        console.log("Back Back");
        this.navCtrl.pop({animate:true,animation:'transition',duration:500,direction:'back'});
    }
}

If you need other animations you can Follow this Article which is good implementation of ionic-native transition but these only works on device not browser

Answer 2

That's currently not possible with Ionic, but you can use this amazing plugin to achieve something like this:

In order to install it, just run

npm i --save ionic2-super-tabs

And then import SuperTabsModule.forRoot() in your app's main module

import { SuperTabsModule } from 'ionic2-super-tabs';

@NgModule({
    ...
    imports: [
      ...
      SuperTabsModule.forRoot()
      ],
    ...
})
export class AppModule {}

Now everything is ready, so in your view you can do something like this:

<super-tabs>
  <super-tab [root]="page1" title="First page" icon="home"></super-tab>
  <super-tab [root]="page2" title="Second page" icon="pin"></super-tab>
  <super-tab [root]="page3" title="Third page" icon="heart"></super-tab>
</super-tabs>