How to disable page transition animation in Ionic 4 / Angular?

Question

I’m using ‘routerLink’ to navigate to a new page and I was wondering how I could disable the page transition animation? I couldn’t find an answer to that simple question in the documentation or here (I only found answers to old versions of Ionic / Angular).

Could someone please point me to the right spot?

Answer 1

The parameter has changed from "animate" to "animated".

ie. in app.module.ts, do the following

IonicModule.forRoot({animated: false});

Answer 2

To only disable page transition animations, while leaving the rest of the animations alone, add animated="false" to the <ion-router-outlet>:

<ion-router-outlet id="main-content" animated="false"></ion-router-outlet>

Answer 3

For people who want to control specified page only, you can use NavController of Ionic4 giving { animated: false } as NavigationOptions.

import { NavController } from '@ionic/angular';

constructor(public navCtrl: NavController,) {}

this.navCtrl.navigateForward(path, { animated: false });