Search code examples
angulartransitionrouterionic4

ionic 4 - change navigation transition direction dynamically


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?


Solution

  • I've solved this issue and posted a medium article

    https://medium.com/@hanche2001/how-to-change-between-android-and-ios-page-transitions-dynamically-in-ionic-ec1256a692f5

    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