Ionic 4 not animating every page transition

Ionic Framework
1

Hey there,

I’m currently working on an application using Ionic v4 and Angular, but have noticed in some situations the application will animate some page transitions, but not all of them.

For example, I use the following code as a ‘back’ button, and it will animate the page transition every time (good):

<a [routerLink]="['/tabs', 'communities']">
    <ion-icon
        slot="icon-only"
        name="arrow-round-back"
></ion-icon> 
</a>

I’m assuming this is because the current page is on top of the stack and is being popped off accordingly.

However, in the page that it navigates back to, if I try to navigate forward to a page (such as the one I was in above), there is no slide-in animation, the page just flashes and the content loads in like a normal web page does. The code for that link looks like this:

<a [routerLink]="[community.id]">
    <h3>
        {{ community.name }}
    </h3>
</a>

(Note the above snippet is from a component that is within a page (if that makes any difference)? I don’t think it does as I put that components html directly into the page html and it still had the same effect).

Why does the first one (navigating back) animate perfectly, but the second one (navigating forward) does not? I tried adding nav-transition="android" and routerDirection="forward" to the snippet above but had no luck.

I have noticed that some pages that navigate forward do animate correctly, but I’m not exactly sure why.

Any help would be awesome.

Thanks!

2 Likes