The navigation between pages by default has a slide/shrink & slide (i dunno what to call it); but anyways, what happens is the navbar “pops” on top of my current view, then the rest of the view for that page slides in. For example if I’m on a page that is completely white with no header/footer. Jus…

Can you post a code sample or Screen shot or a GIF?

It’s almost impossible for me to capture a screen shot since it happens quite quickly. And I’d be spending way too much time trying to learn to make animated gif in photoshop. But let me try and simplify it down to just the header element. Landing page, is just white with no header, no footer and a…

It seems that any elements outside of the <ion-view> will present the issue of not being animated during the slide transition. Including the default use case of <ion-nav-bar> being contained on the index page. So the nav-bar will never animate, it just shows/hides. And when going from a screen with…

I solved it by adding pseudo class :before to the ion-view ion-view.pane:before { content: " "; display: block; position: absolute; top: 0; left: 0; right: 0; height: 44px; background-color: red; } Work perfect for me.

Nice solution. Even better I solved following @artemdemo solution, but setting background color to entire view that match header color. Then all background goes with that color, but it can be fixed setting white color (or preferred background color) to the “ion-content” by CSS. Works!

Hi Leocreo, Can you explan your css code solution ? I’m not sure to undestrand :slight_smile:

Hey guys I am still having this issue as well and not sure what the css solution is. It seems like a major problem that you can’t go from a page with no header to a page with a header without problems. Otherwise I just have to always have a header of the same color??

Apply style top: 44px to <ion-content> of your view without header. Then sliding becomes purely horizontal.

[solved] Page transition animation has artifacts of header/navbar

ionic-v1

allanos83 January 29, 2015, 12:57am 5

I have this same exact problem, any ideas on how to fix this? pls help! I am using ionic 1.3.2

Problem with view transitions with a hidden navbar

Topic		Replies	Views
Exclude header/toolbar/navbar from page transition Ionic Framework	2	1123	September 9, 2023
Transitions between pages, the header does not happen like the content Ionic Framework	0	549	September 15, 2020
Navigating from page that doesn't have app-header to one which does animation issue Ionic Framework	4	101	August 14, 2024
"Glitch" in transition for header ionic-v1	8	1487	January 12, 2015
White Space Showing where Nav Bar Should be on Transition ionic-v1	0	1008	March 1, 2016

[solved] Page transition animation has artifacts of header/navbar

Related topics