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

15
votes

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?

3
angularionic-framework
angular.io/api/router/CanDeactivate - JB Nizet
are you asking about the transition animation, or do you want to disable/redirect the route? - SaMiCoOo
Sorry, I edited the question. I am asking about he animation. - JilReg
See this, this worked for me for just disabling page animation rather than all animations stackoverflow.com/questions/55583239/… - spencer

3 Answers

18
votes

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

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

IonicModule.forRoot({animated: false});
15
votes

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>
6
votes

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 });