Exclude header/toolbar/navbar from page transition

@tim-tx wrote:

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?

Posts: 1

Participants: 1

Read full topic