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

Ionic Framework
1

Hi,

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/${book.id}, "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

Thanks

2

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.navController.setDirection('forward');
    this.router.navigate(['path', 'to', 'destiny']);
}
3

Thanks for your reply.

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

4

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

5

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

6

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.

7

I have the exact same issue, did you ever figure it out? thanks!

8

You can import the default iOS or Android transition from Ionic core and try using it with useIonRouter. Here’s an example.

import { useIonRouter } from '@ionic/vue';
import { mdTransitionAnimation, iosTransitionAnimation } from '@ionic/core';

export default {
	setup() {
		const ionRouter = useIonRouter();

		// Replace route and use default iOS transition
		// For Android transition use mdTransitionAnimation instead
		ionRouter.replace('destination_route', iosTransitionAnimation);
	}
}
1 Like