Page Transition direction in ionic 4

Ionic Framework
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.

3 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
8

In app.module.ts follow below steps :-

import { iosTransitionAnimation } from ‘@ionic/core/dist/collection/utils/transition/ios.transition.js’;

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

@andrewmotorcentral :: Thanks for the hint…

6 Likes
9

Its not working anymore, i tried but is not working, can you please help me to find out other solution? I tried https://github.com/ionic-team/ionic/issues/16829#issuecomment-483180132 it worked well but i have an html 5 AUDIO tag to play audio file in my app, this animation resizing audio tag width on each page.

<audio id="headerDefaultPlayer{{ch.ID}}" class="audioplaychapter" controls controlsList="nodownload" [src]="ch.audio" preload="none" [ngStyle]="{'width': 'awidth'}" [style.width.%]="awidth">
          </audio>

Can you please help.

Thanks in advance

Zack

10

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.