Putting a page on the nav stack and tab-bar animation


#1

Is it possible to have the tab bar on iOS slide out of the way when a new page is put on the nav stack so that the new page extends to the bottom of the physical screen?


#2

good question looking for the same answer :smiley:


#3

I’ve got the tabs to animate out when the new page enters but I’m struggling to get the new page to take up the full height available to it. It seems the ion-tabbar-section is still included in the document flow despite it not being in the device window so I get a black area where the tabbar used to be.


#4

I gave up trying to make a nice animation in the end and just went with the same tabbar exit that Apple uses in the Mail app. On your tabbar element add an id:

<ion-tabs id="tabs">
...
</ion-tabs>

in app.ios.scss:

//hide tabs when necessary
#tabs ion-tabbar-section.hide-tabs {
    display: none;
}

in the page.js file for the page that is entering:

export class MyPage {
    constructor(platform: Platform) {
        this.platform = platform;
        if (this.platform.is('ios')) {
            this.tabBarElement = document.querySelector('#tabs ion-tabbar-section');
        }
    }

    onPageWillEnter() {
        if (this.platform.is('ios')) {
            this.tabBarElement.classList.add('hide-tabs');
        }
    }

    onPageDidLeave() {
        if (this.platform.is('ios')) {
            this.tabBarElement.classList.remove('hide-tabs');
        }
    }
}