Page Transition Animation in Ionic 2

Question

I have simple tabs template Ionic 3 application in which, I am switching between the tabs whenever user swipes on view based on left or right I am switching between Tabs and All working fine accept there is no Animation effects when Page transition happens from tapping the tabs or from swiping the screen.

I am getting the Animation for page pushing and popping

this.navCtrl.push(ContactPage, {
    animation: true, direction: 'forward'
});

but not for selecting Tabs

this.navCtrl.parent.select(2,{
    animation: true, direction: 'forward'
});

Thanks in advance

Answer 1

That's currently not possible with Ionic, but you can use this amazing plugin to achieve something like this:

In order to install it, just run

npm i --save ionic2-super-tabs

And then import SuperTabsModule.forRoot() in your app's main module

import { SuperTabsModule } from 'ionic2-super-tabs';

@NgModule({
    ...
    imports: [
      ...
      SuperTabsModule.forRoot()
      ],
    ...
})
export class AppModule {}

Now everything is ready, so in your view you can do something like this:

<super-tabs>
  <super-tab [root]="page1" title="First page" icon="home"></super-tab>
  <super-tab [root]="page2" title="Second page" icon="pin"></super-tab>
  <super-tab [root]="page3" title="Third page" icon="heart"></super-tab>
</super-tabs>