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

shinglesmingles · June 23, 2016, 3:36pm

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:

<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!

shinglesmingles · June 24, 2016, 1:08am

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!

dbaq · August 16, 2016, 4:23am

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.

mhartington · August 16, 2016, 4:13pm

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

shinglesmingles · August 16, 2016, 4:25pm

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).

mhartington · August 16, 2016, 5:35pm

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

dbaq · August 16, 2016, 8:14pm

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

dbaq · August 16, 2016, 8:20pm

@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?

shinglesmingles · August 17, 2016, 1:42pm

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.

mhartington · August 18, 2016, 7:32pm

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.

dbaq · August 18, 2016, 8:59pm

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

mhartington · August 18, 2016, 9:32pm

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

Yes, wrap it in a ion-toolbar

dbaq · August 18, 2016, 11:00pm

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

cmaissan · September 1, 2016, 8:51pm

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.

dbaq · November 20, 2016, 6:53pm

@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.

dbaq · January 5, 2017, 4:42am

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.

mhartington · January 5, 2017, 4:30pm

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

github.com

ionic-team/ionic/blob/e98466128d0649ebc652e56936dec6982fd4349d/src/transitions/transition-ios.ts

import { Animation } from '../animations/animation';
import { isPresent } from '../util/util';
import { PageTransition } from './page-transition';

const DURATION = 500;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
const OPACITY = 'opacity';
const TRANSFORM = 'transform';
const TRANSLATEX = 'translateX';
const OFF_RIGHT = '99.5%';
const OFF_LEFT = '-33%';
const CENTER = '0%';
const OFF_OPACITY = 0.8;
const SHOW_BACK_BTN_CSS = 'show-back-button';


export class IOSTransition extends PageTransition {

  init() {
    super.init();

This file has been truncated. show original

dbaq · January 7, 2017, 10:36pm

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:

github.com

dbaq/ionfooteranimation-issue/blob/master/src/components/custom.ts#L5


import { Component } from '@angular/core';


@Component({
selector: 'custom',
template: `<div style="height:40px; width:100%; background-color: red; color: white">:(</div>`
})
export class Custom {}

page3:

github.com

dbaq/ionfooteranimation-issue/blob/master/src/pages/page3/page3.html#L12-L14


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

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

What should I do in this case?

Thanks for your help.

dbaq · January 11, 2017, 2:26am

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

philipgriffin · June 8, 2017, 1:06am

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

Topic		Replies	Views
[solved] Page transition animation has artifacts of header/navbar ionic-v1	9	10125	March 18, 2016
Beta.10: ion-header content not animating in ionic-v3	0	402	June 30, 2016
Disable animation for nav bar ionic-v1	0	565	December 8, 2015
Ionic animation documentation ionic-v1	7	1295	January 17, 2015
Embedding ion-footer-bar in template pages ionic-v1	6	4055	December 16, 2014

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

Related topics