Nav animations for ion-footer-bar and ion-header-bar


#1

Hi everyone. I’ve been having a great time creating with Ionic 2 so far :slight_smile: 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:

<ion-navbar *navbar primary>
    <ion-title>Chat</ion-title>
</ion-navbar>
    
<ion-content>
    <!--Chat messages here-->
</ion-content>

<ion-footer-bar>
    <!--Chat Input Here-->
</ion-footer-bar>

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!


#3

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!


#4

Have you ever figured this out? I am facing the same issue.

@mhartington do you know how we can have the animation applied to custom elements as well in ion-header/ion-footer on iOS?

Thanks for your help.


#5

This should be possible now with beta 10/11. I have tested this personally and have the navbar, toolbars, footers,etc all animating correctly


#6

Hi there. The short answer is no unfortunately. Haha.

I have found the only workaround to be using pageTransition: "md-transition" in IonicConfig (app.ts).


#7

No, this is possible with beta10/11. Again, I have tested this personally


#8

Hey @mhartington,

Thanks for answering. I tried with beta 11 and the nightly build but no luck. I tried with a custom component like:

<ion-footer>
  <my-component></my-component>
</ion-footer>

<my-component> does not follow the iOS animation. This component could be a simple <div>.

Can you please share some code if you have a working version?

Thanks


#9

@mhartington,

try the following footer code with the iOS transition:

<ion-footer>
  <div style="height: 40px; width: 100%; background: red;">custom component</div>
</ion-footer>

You will see that the red div after right away and does not follow the transition.

Is that a bug?


#10

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.


#11

Ok, with the custom components, it’s a bit different.

With the way that view animations work, they actually need to know what elements to animate.
They animate the inner elements, and not the ion-header or ion-footer

So custom components will not be supported for this.


#12

Thanks @mhartington for the explanations. How can we make that work then? Do we need to wrap it inside a <ion-toolbar> for instance?

Why is the animation not applied to all inner elements?

Thanks for your answers


#13

It’s not applied to all inner elements because different elements have different animations

Yes, wrap it in a ion-toolbar


#14

That’s a solution. It looks like it is working even though I noticed some glitches during the transition (my component contains an ion-grid). I need to dig into it and will open another issue.

IMHO, it is counter intuitive to not animate all inner elements during a transition. If some components have a different animations, they should override the default animation.

Thanks for your time :thumbsup:


#15

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.

  ionViewLoaded(){
    let element = new ElementRef(document.querySelector('ion-header ion-icon[custom]'));
    this.view.getNavbar().addItemRef(element);
    this.view.setToolbarRef(element);
  }

I’m not sure if this is kosher. I haven’t noticed any adverse side effects.


#16

@mhartington,

the ion-toolbar trick does not work anymore. I updated my component from 2.0.0-beta.11 to 2.0.0-rc.3 and the component is not animated anymore.

I haven’t changed the structure of my component at all since beta.11.

You can reproduce it by using a component the following way:

<ion-footer>
  <my-component></my-component>
</ion-footer>

my-component’s template:

template: `
  <ion-toolbar>
    <div style="height: 40px; width: 100%; background: red;">custom component</div>
  </ion-toolbar>
`,

What should be done now to have my component to follow the main animation?

thanks for your help.


#17

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.


#18

Can you make a sample project with this setup?
You should be able to animate that in the footer, since the animation targets them.


#19

Hey @mhartington,

I made you a github repo so you can see the issue. Please take a look at https://github.com/dbaq/ionfooteranimation-issue, you can also check this out on ionic view: 04765748 (with iOS only, android works).

The difference between page2 and page3 is that I am using a custom component:

page2:

custom component:

page3:

The result is that page2 footer content is not animated, page3 is.

What should I do in this case?

Thanks for your help.


#20

Opened a github issue as I believe it is a bug: https://github.com/driftyco/ionic/issues/9947


#21

@dbaq I don’t suppose you had a solution to this in the end? I’m facing the same issue.