Hi everyone. I’ve been having a great time creating with Ionic 2 so far Just want to put forth my question to the community as I’m out of answers.
I am trying to create pages that have a static header/footer along with a scrollable list. After many attempts at sizing said list (including fiddling with the DOM) I have settled on an ion-header-bar approach.
Here’s a very rudimentary, stripped down template:
With this approach, I run into the unintended side effect that there are no animations on the footer or header bar. Using this.nav.push or this.nav.pop results in it staying static while ion-content (and ion-navbar) moves.
Also, after some testing, I found out that if the footer bar is wrapped in ion-content, it will animate properly. However, it will then scroll with the rest of the content.
Anyone have a solution or different approach to this problem? As a backup, I have my DOM hack but I really don’t wish to use it if possible. Thanks!
With further testing, I have found that this affects only the ios transitions. Android transitions are not affected (because they move along the Y axis while iOS moves along the X axis?) Not really sure how this works. Any feedback is appreciated!
Just tried it again with code similar to the above post by @dbaq. I can confirm this is not working in Beta 11. If there is a <div> in <ion-header> or <ion-footer> it does not transition correctly with iOS.
My guess (and I’m probably wrong) is that the transition looks for the <ion-navbar> and <ion-content> or <scroll-content> and applies the animation to them, leaving out anything else.
I was able to get around this by adding the custom element (in my case an icon) to the view’s navbarItemRefs and toolbarRefs lists in the ionViewLoaded hook. They are then animated during the transition.
let element = new ElementRef(document.querySelector('ion-header ion-icon[custom]'));
I’m not sure if this is kosher. I haven’t noticed any adverse side effects.
Updated to the RC4 and it is still happening. Any help would be appreciated. Thanks.
EDIT: if the ion-toolbar is inside a custom component, it is not animated anymore. If I wrap my custom component with an ion-toolbar, it is animated, but I am trying to ship a custom component where I can’t do that.