Exclude header/toolbar/navbar from page transition

Ionic Framework
1

There seems to be a standard page transition animation where content slides upward as it becomes visible. I have a navbar component that sits in the header of all my core pages, like:

<ion-header>
  <app-navbar></app-navbar>
</ion-header>

The navbar participates in the transition animation, it slides up as with the rest of the content. My feeling is that it should remain fixed.

I can think of two possible solutions:

  1. Place the navbar somewhere where it exists outside of the transition (app.component.html?), or
  2. Something else (configuration I’m unaware of, or wrapping the navbar in some special element that exempts it from transitions)

I have tried placing the navbar at various positions in app.component.html, e.g.

<ion-header>
  <app-navbar></app-navbar>
</ion-header>
<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

In that case the navbar remains visible and does not transition, but content is hidden underneath it.

Wrapping the app-navbar in an ion-toolbar does not prevent the navbar from appearing in the transition or from covering page content (if the navbar is in app.component.html.

How can I prevent content in the header from participating in the page transition animation?

1 Like
2

Do you find a solution on this ?

1 Like
3

anyone found a solution in 2023?

I think it’s a pretty common use case, e.g. when child pages of one page all share the same header which has buttons etc., it’s weird if the header gets reanimated with each child page navigation