Ionic 4 transition when switching tab

Ionic Framework
1

Hello,
I’m currently developing a pretty basic Ionic 4 app with tabs layout. I would like a to have a transition for switching a tab to another, but I don’t know how to achieve that (without hacking it with CSS). All my tabs are defined in tabs.router.module.ts, as in generic ‘tabs’ starter template. In my TS, I use

this.navCtrl.navigateForward(‘tabs/…’);

to navigate to another tab, however I’m getting no transition. I do have a transition, when page is defined in app-routing.module.ts. How can I get transition for switching between tabs? I was able to get them in Ionic 3 with no additional effort. Any help is greatly appreciated, thank you.

2

Have you checked out the Native Page Transitions plugin?

The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.

I never used with tabs, but looking at the code I would give a try:

// example of adding a transition when a page/modal closes
ionViewWillLeave() {

 let options: NativeTransitionOptions = {
    direction: 'up',
    duration: 500,
    slowdownfactor: 3,
    slidePixels: 20,
    iosdelay: 100,
    androiddelay: 150,
    fixedPixelsTop: 0,
    fixedPixelsBottom: 60
   }

 this.nativePageTransitions.slide(options)
   .then(onSuccess)
   .catch(onError);

}
3

Thanks for your suggestion, however I would like transitions to work in browser (PWA) and I see that only Android, iOS and Windows Phone platforms are supported.

4

I see, have you already checked this Josh Morony’s related tutorial? He uses the Animation from ionic core, so it should work for all platforms. It can achieve different animations, he uses a modal page as example, but should be easily implemented on tabs.

UPDATE
Another link that may help you, more updated: DEVDACTIC

1 Like
5

Thanks, I will check this out