Ionic is a fantastic framework to write your own apps. It is based on Cordova and angular and enables you to quickly write good looking apps without too much effort.

Depending on the platform you use to start your app Ionic even comes with pre-defined page transitions to animate the navigation of one page to another. The standard page transition on iOS is a swipe from left or right. It looks like this:

The documentation for page transitions in Ionic however is quite confusing and as a beginner it took some time to understand what transitions are there and which should be used. The official documentation contains a page for the NativePageTransitions module, however I advise you not to use that. Not only that it hasn’t received any updates for a long time, but to do the animations the modules takes a screenshot of the starting and the landing page and is animating the two images. This seems a weird way to do that and the amount of open issues while not issues get closed speaks for itself.

What you should use, is an integrated feature of the Ionic NavController class which you already use to navigate between your pages. This feature is enabled by default (depending on the platform) but it can be configured with your navigation call too:

this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition"});  

With “animate: true” you turn on the animation (which is the standard setting) and “animation: transition” sets the animation to use to animate the page transition. Its a string and “transition” means to use the standard transition depending on the current platform. When you want to use the iOS transition on an android platform you can initiate the navigation like this:

this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition-ios"});  

There are no other built-in transitions you can use (like slide-down, slide-up or scale-out) and I could find absolutely no official documentation how to implement a custom transition. However, there is a quasi-official way to implement your own transitions.

You can implement your own transition class the same way the official transitions are implemented: write your own transition class extending the “ionic-angular/PageTransition” class and register the new transition at the ionic runtime.

The most basic (empty) transition looks like this:

import {NgModule} from "@angular/core";
import {Config, IonicApp, PageTransition} from "ionic-angular";
import {MyApp} from "./app.component";

@NgModule({
	declarations: [MyApp],
	imports: [...],
	bootstrap: [IonicApp],
	entryComponents: [MyApp,...],
	providers: [...]
})
export class AppModule {
	constructor(private config: Config) {
		this.config.setTransition("emptyTransition", EmptyTransition)
	}
}

export class EmptyTransition extends PageTransition {
	init() {
		//here would be the implementation of your own page transition
	}
}

When you look at the official implementation of the iOS page transition you can see that you can define the animations on entering and leaving the page utilizing an Animation class provided by ionic-angular. As there is no documentation I had to use trial and error how to find out how to use this class.

After messing around some time I came around with some page transitions of my own: “slide” and “slide-down”.

SlideTransition is a left/right-swipe-in-transition similar to the official “transition-ios” but it animates the whole page content and not only the content while header and footer elements remain fixed.

SlideDownTransition however is a bit different. It slides down the leaving page content and reveals the entering page content while doing so.

SlideTransition is tested to work both in a forward and backward transition (think: the Android back button). SlideDownTransition probably doesn’t work but I haven’t tested it as my use case doesn’t require it to work.

What can be annoying is, that the official transitions are manually controlling the visibility of the standard back button in the header component. I don’t understand why this is done in a page transition and not in a back button component of some kind. As a consequence I abandoned the use of the official back button in my app and always use my own button when needed (which is not always the case). So the above implementations of page transitions don’t care about the visibility of the back button, therefore the standard back button is always invisible.

With the Ionic Animation class you can define some starting and end styles which are then set on the page elements of the ionic pages. The styles are our well-known CSS styles and don’t use the angular animation features provided by the BrowserAnimationsModule. Implementing your transition is relatively easy as you can adapt most of the code of the well-known transitions you have used in your web applications before.

However, I wish that the Ionic team had at least some official documentation for this feature.