Embedding ion-footer-bar in template pages


I have an <ion-footer-bar> in some of my template pages. My main index page has the following:

<ion-nav-view animation="slide-left-right"></ion-nav-view>

Then in my template pages, I use and specify the footer:



This works well and I like it because I can control the footer on a per-page basis. The design of the app I’m developing also calls for this since footers are different between pages.

However, when a user transition betweens pages, you can see the footer slide across the top of the screen. I noticed that if I move <ion-footer-bar> to the index.html page (under <ion-nav-view>), there is no transition/animation issues.

Is it possible to fix the animation issue when <ion-footer-bar> is at the bottom of a template page?




Can you post a codepen or plunker?


I was able to fix this by 1) upgrading to the beta release and 2) moving ion-footer-bar to be after </ion-content>. I’m not sure if the upgrade was required, but it works great now.



Most likely the upgrade wasn’t needed, just placing the footer inside the ion-view should have taken care of everything.

Glad to hear you got everything resolved


Hi there! I have the exact same problem, but in my case the ion-footer-bar inside ion-view doesn’t work. I mean, it works well, but in every page I have the footer bar animated!!

Any idea?



Do you have a codepen sample?



Thanks a lot for the possible help!