Using `forward` and `back` animations with IonRouter.navigate


In order to completely disable native back swipe in IOS I’m having to use replace instead of push and its working fine except for one issue … disorienting page transiations.

I expect router.navigate(/book/${}, "forward", "replace"); to show a forward animation but it just shows back animation always, is there a way to customize it or import and use the existing forward animation?

Also the other issue is that the very first transition almost always is abrupt without any animation at all.

Here’s it in action: Screen Recording 2022 03 21 at 6 18 11 pm - YouTube


What JS framework are you using?

In Angular the easiest way is using NavController to “force” the animation you want.

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

constructor( private navController: NavController, private router: Router ) {  }

navigateForward() {
    this.router.navigate(['path', 'to', 'destiny']);

Thanks for your reply.

I’m using Ionic v6 with Vue and it doesn’t seem to have navController export.

Is there a Vue equivalent? Anyone?
Really stuck on this one.

It looks like if you use useIonRouter you can set a custom animation - Vue Navigation: Use Ionic + Vue Router to Create Multi-Page Apps.

Yes I’ve seen that but I don’t want a custom animation neither do I know how to create one, I just want the back/forward animation that Ionic ships with just not sure how to use it with IonNavigate.