I want to be able to control the navigation transition direction dynamically.
in this post I found out how i can enforce either android or ios default transitions.
https://forum.ionicframework.com/t/page-transition-direction-in-ionic-4/148518/5
IonicModule.forRoot({
rippleEffect: false,
// TODO:
// navAnimation: override here
}),
Is there a way i can set the transition direction from inside a component before the transition starts?
EDIT: I am not currently using this solution as I experienced a couple small weird bugs. Perhaps this could still help someone though...
Just ran into this today. My use case was pagination. In iOS mode, for example, I wanted the page to turn forward if the new page clicked was higher, else I wanted the page to turn back. Yet, in both cases I wanted to go forward in history.
The solution is actually super simple. Here are the docs for NavController. Here is my one-liner:
this.navController.navigateForward(`/blog/home/${page}`,
{ queryParamsHandling: 'merge', animationDirection: page > this.currentPage ? 'forward' : 'back' });
So, basically just use NavController - which still works with the Angular router - and provide the animationDirection option.
Using navigateForward is the right move if you want it so regardless what direction they go, they are still going forward in history and can go back to the previous view. There is also navigateBack as well.
I've solved this issue and posted a medium article
TLDR
IonicModule.forRoots allows you to configure and force a predefined transition animation with the navAnimation function
The navAnimation function receives a reference of the entering and leaving page as well as the ion-router-outlet used
You can write a custom function that checks either the ion-router-outlet or the entering page for any DOM attribute and return which page transition you want to use
I use the ionic navController and the options nav.navigateForward, nav.navigateRoot, and nav.navigateBack. These hook into the angular router perform the necessary directional animation.
It's not well-documented, but this has some good examples: https://www.freakyjolly.com/ionic-4-latest-angular-routing-in-ionic-4-application/#more-2025