Ugly animation between views with ion-header-bar and ion-nav-bar

ionic-v1
1

My application has 2 views (“main” and “settings”). I need a classic navigation bar on “settings” and custom bar on “main”. And for it I use:
classic global ion-nav-bar for “settings”, and for “main” ion-header-bar (with view property hide-nav-bar=true).

And when I change state to settings and back, animation looks very ugly, because:

“main” screen has hidden nav-bar but “settings” has it visible. And during animation from “settings” to “main” Ionic hide nav-bar of “settings”.

Screen settings:

Back from “settings” to “main”:

How can I fix it and get normal animation between views with ion-nav-bar and ion-header-bar? Thank you.

2

Just curious, we do you need the custom header bar?
Could be something that could be done with just the main nav-bar?

3

Is this expected when using the custom header bar and is there a way around this?

4

I am also facing this problem . The slide transitions of ion-nav-bar and ion-nav-view are not matching. ion-nav-bar is sliding fast compared to ion-view

5

Right now, hide-nav-bar just sets the display to none. But we can override this and start to add some custom animations.

1 Like
6

Are you planning on doing anything with that? I often need a custom header-bar on my views and it would be awesome if the default navbar just animated out in the same way as previous view. I played around with transorm3d and transition but I can’t achieve that same effect.