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

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. Just a blank view. And the page I want to navigate to has a red header, green content and blue footer:

The white page gets the red header from the new page, then the rest (green/blue) of the page slides in to match. And when going back to the white page, the red header gets replaced by the blue footer and then the white slides in over everything.

The best I can guess is the ion-nav-bar is only getting a visibility treatment applied with no transition/animation.

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 link to a secondary page that contains a black background and red header. (so it’s a big white box)

What happens when i click the link is; the red header from the secondary page appears. (for a fraction of a second it looks like the header is part of the white page). So now we have a white page with the header from page 2. Then the black section transitions over the white to complete the look. (So the nav bar does not animate, but the page content does animate).

I’m using this default navbar in the index.html

<body>
<ion-nav-bar type="bar-positive" 
                 animation="nav-title-slide-ios7" 
                 back-button-type="button-icon button-clear" 
                 back-button-icon="ion-ios7-arrow-back"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>

Followed by the white page:

<ion-view has-header="true" hide-nav-bar="true" has-tabs="false" padding="true">
  <ion-content>

And hide-nav-bar="false" on the black page.

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 no nav bar, to one with a nav bar; the artifact will always present itself for that small duration.

I’ve done a walk-around with WET (write everything twice) coding by copy/pasting a custom nav bar to each view.

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

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.

2 Likes

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.