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