Animation when transition between tabs in Ionic 2

Question

I have an ionic 2 app with basic tabs.

<ion-tabs selectedIndex="1">
  <ion-tab [root]="tab1Root" tabTitle="hunts" tabIcon="book"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="hunting" tabIcon="locate"></ion-tab>
</ion-tabs>

The tabs appears perfectly. But I would like to have a sliding animation when transitioning between tabs. That is, when I press the rightmost tab from the middle tab, middle tab should slide to left and rightmost tab should slide in from right. This is a basic android animation.

I am unable to find any details on how to accomplish this. Is this still not possible in Ionic (2.2.0) ?

Answer 1

I came up just now with e diffrent solution ... hehe It's a funny one, a primitive idea but it gives you half of transition feeling in 2 minutes

Pure CSS:

1. In a global app's scss file make a css selector that will grab components loaded into router outlet of your < ion-tabs >
2. Add an css animation on start :P - it will be run every time a new component is inserted

app-e-tabs ion-router-outlet > .ion-page { 
  animation: fadeIn 0.3s 1 forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 5vh, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

Of course there are probobly thousends of possible problems and it will never look like the proper page transition .. but it's better then nothing :)

EDIT: As some people pointed out you should remove app-e-tabs from first line of css - it is the name of a module in my app - that's why it landed in my code.