I’m using:
- Ionic 7
- Stencil js
- Typescript
I have a tab based app. These are my tabs in page-tabs.tsx
<ion-tabs>
<ion-tab tab="tab-home" component="page-home">
</ion-tab>
<ion-tab tab="tab-map">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-refueling" component="page-refueling">
</ion-tab>
<ion-tab tab="tab-awards">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-other">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab-home">
<ion-icon src="/assets/icons/tab-menu/home.svg"></ion-icon>
<ion-label>Home</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-map">
<ion-icon src="/assets/icons/tab-menu/map.svg"></ion-icon>
<ion-label>Mappa</ion-label>
</ion-tab-button>
<ion-tab-button>
{/* <ion-icon src="/assets/icons/tab-menu/refueling.svg"></ion-icon> */}
</ion-tab-button>
<ion-tab-button tab="tab-awards">
<ion-icon src="/assets/icons/tab-menu/award.svg"></ion-icon>
<ion-label>Premi</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-other">
<ion-icon src="/assets/icons/tab-menu/other.svg"></ion-icon>
<ion-label>Altro</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
and this is my routing, app-root.tsx
<ion-app>
<ion-router useHash={false}>
<ion-route-redirect from="/" to="/welcome" />
<ion-route component="page-tabs">
<ion-route url="/home" component="tab-home">
<ion-route component="page-home"></ion-route>
</ion-route>
<ion-route url="/map" component="tab-map">
<ion-route component="page-map"></ion-route>
<ion-route url="/singlestation" component="page-station-single"></ion-route>
</ion-route>
<ion-route url="/refueling" component="tab-refueling">
<ion-route component="page-refueling"></ion-route>
</ion-route>
<ion-route url="/awards" component="tab-awards">
<ion-route component="page-awards"></ion-route>
<ion-route url="/singlereward/:rewardId" component="page-single-award"></ion-route>
</ion-route>
<ion-route url="/other" component="tab-other">
<ion-route component="page-other"></ion-route>
<ion-route url="/account" component="page-account"></ion-route>
<ion-route url="/virtualcard" component="page-virtual-card"></ion-route>
<ion-route url="/historysupply" component="page-history-supply"></ion-route>
<ion-route url="/historypayment" component="page-history-payment"></ion-route>
<ion-route url="/favouritestations" component="page-favourite-stations"></ion-route>
<ion-route url="/notifications" component="page-notifications-archive"></ion-route>
<ion-route url="/news/:notificationId" component="page-notifications-single"></ion-route>
<ion-route url="/faq" component="page-faq"></ion-route>
<ion-route url="/support" component="page-support"></ion-route>
<ion-route url="/policy" component="page-policy"></ion-route>
</ion-route>
</ion-route>
<ion-route url="/welcome" component="page-welcome"></ion-route>
<ion-route url="/login" component="page-login"></ion-route>
<ion-route url="/signin" component="page-signin"></ion-route>
<ion-route url="/forgotpwd" component="page-forgot-pwd"></ion-route>
<ion-route url="/recoverypwd" component="page-recovery-pwd"></ion-route>
<ion-route url="/onboarding" component="page-onboarding"></ion-route>
<ion-route url="/confirmemail" component="page-confirm-email"></ion-route>
</ion-router>
<ion-nav />
</ion-app>
In my page-home, which belongs to the tab /home, there is a button that should lead to a sub-tab of other, specifically /other/favouritestations.
this is the button
<ion-button fill="clear" size="small" onClick={() => goToPage('/other/favouritestations')}>{i18n('see-all-favourites')}</ion-button>
where goToPage use my router to push the page
export function goToPage(page: string){
let router = document.querySelector('ion-router');
router.push(page);
}
The problem is that if I use the goToPage function to navigate to the sub-page of a tab different from the current one, the smooth animation doesn’t occur, and the page appears abruptly, which looks very unappealing.
This is the animation that I would expect.
I have already tried using ion-nav-link, and the animation remains intact, but the page URL doesn’t change, and the resulting page doesn’t get inserted within the tab but appears as a separate page. I also attempted to use ion-router-link by passing href=/other/favouritestations, but the animation is not present.
there is a way to obtain this goal also for pages of different tabs?