Although this answer is a bit late, it may prove helpful for future users. Here is a snippet of code that can be used to achieve transition animations. The question being addressed has a unique title and description, prompting this specific answer.
goTo(page, params) { //params are optional, leave blank {} if no data is being sent
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'});
}
Important note: If you are using the BackButton in the Navbar, follow these steps:
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 are looking for other animations, you can refer to this Article, which provides a good implementation of Ionic-native transitions. However, please note that these animations may only work on mobile devices and not on web browsers.