Page Transition direction in ionic 4

#1

Page Transition has changed with Ionic 4 from bottom to top instead of left to right when using ‘forward’ as direction.

How do I change it to left to right?

#2

Can someone tell how to change the default page transitions? It’s as TS says, defaults to a fade from bottom up when doing a horizontal page move. It doesn’t feel nice. I just can’t find anything in the docs about this as the new Ionic 4 docs is really lacking.

routerDirection=“forward” don’t seem to do anything however I try to use it.

#3

Ionic 4 docs actually have a preview of their sample app here:

Their example have horizontal page transitions.

But the Docs mentions nothing of how it’s done.

I’m trying to look at the source code of the example app but there is no hint of how to change the page transition behavior.

#4

I found a spot to override and force the navigation animation, in app.module.ts:

IonicModule.forRoot({
navAnimation: AnimationBuilder <{}>,
}),

But how do I here reference the Ionic built in iOS animation found here:

Anyone know how to do this?

#5

Hi. I’ve been wanting to do the same thing - a lot of my page transitions need to be horizontal (as per Material Design guidelines) but the only transition available in Ionic 4 MD mode is slide up :frowning:

It looks like the following post has the answer (albeit for changing iOS transitions to be MD slide up) - so I suspect it will work the other way around also: https://github.com/ionic-team/ionic/issues/16829

#6

Just a quick update on this.

To use iOS page transitions

In app.module.ts

imports: [
    ...
    IonicModule.forRoot({  
      navAnimation: myTransitionAnimation,
    }), 
  ],

Then underneath that, paste the contents of
node_modules@ionic\core\dist\collection\utils\transition\ios.transition.js

rename iosTransitionAnimation to myTransitionAnimation

It would be nice however to have options on the per page basis to dictate which navigation you want - as there are still some situations I want a slide up/down.

2 Likes
#7

Thanks you actually saved my life.
I have made a .ts file with the content of iosTransitionAnimation and your solution works perfectly.

1 Like