My code:
<ion-tabs tabs-type="tabs-icon-only" animation="fade-in-out">
I can’t get animations working, I tried “fade-in-out” and “slide-left-right” but it does not slide, pages are changed instantly.
What are the animations available for ion tabs ?
Hmm, seems the docs are a little off, you apply the animation for the tabs by classes.
<ion-tabs class="tabs-icon-top tabs-positive fade-in-not-out">Thanks a lot!
I just have another question: How can I slide-left-right when selecting tab 2 and slide-right-left when selecting tab 1 ?
Do I need to use $ionicTabsDelegate with custom buttons or is there a simpler way ?
The devs are working on some animation changes to make our current traditions better, but as of now, it’s not possible.
I think you could bind the current state name to the tab controller scope and use that on a ng-class="{}" to apply different animation class names to each tab, but that would only solve the “origin” part of the problem, not the “destination”. For example, every transition starting on tab 1 would be slide-right-left and every transition starting on tab 2 would be slide-left-right.
Anyway, I’m looking forward to those improvements too.
Thanks! Good idea!
I’m trying to make it possible, so I’ve created this function in my controller:
$scope.showPage = function(id)
{
$ionicTabsDelegate.select(id);
if(id==0) $scope.transition='slide-right-left'; else $scope.transition='slide-left-right';
}
And added ng-class='{{transition}}', the problem is that $scope.transition is changed before the $ionicTabsDelegate have enough time to start changing the page, so the new transition is used. How can I change the transition only after the .select(id) has been successfully executed ?
EDIT: or a completely different idea: maybe I could use a slidebox and find a way to disable left right sliding so the user HAS to click on the tab button to do a slideTo(x) ?
EDIT 2: Found a way to make it work, not very pretty in my opinion but it works, just use $timeout at 300ms, it’s enough to let the page transition start and not too much in order not to lag if the user decides to change tabs very fast.
If anybody finds a better way to do it, don’t hesitate.
You could use the event $stateChangeSuccess from ui-router to apply the new transition only when the state has completely changed, but I think you’re making it too complex, or maybe I’m thinking it different 
.
If you’re transitioning to and from tabs only through a button or a mechanism that is under your control, I think you should actually do the inverse order. Let’s say you have the following tab setup:
-------VIEW------
T1------T2-----T3
One could say that, transitioning from T1 to any of the other two would be a slide to the right, so before you navigate the user to T2/T3, you apply the desired animation and use a $timeout to trigger the actual navigation after that has been done. The same would be true about from T3, but with slide to the left. You’d have a mix of both cases if coming from T2, depending on where you’re navigating to.
That’s exactly what I did 
Excuse me, i’m new to Ionic, what’s the advantage of using ion-tab vs ion-nav-view ?
Because I found another way, which looks more fluid to do the same thing:
home.html
----------------------------- VIEW --------------------
----- ion-nav-view [name:“homeContent”] -
– bottom links to change page --------------
And then by adding some lines in app.js it’s working well and I don’t have to manage the left/right transitions, the nav view remembers the order in the history and adapt the transition. So what’s the advantage of using tabs when nav view can do better ?
Well, I’m new to Ionic too 
The ion-nav-view represents a unique and and individual navigation wrapper, like the one you use at the root of your index.html probably (it’s what most Ionic examples use). It takes care of navigation concerns for you, like the back button on the header and some sugar around what ui-router already provides.
The ion-tab is supposed to be used inside a bigger ion-nav-view, and represents a single view that has N inner views (each tab). It provides you with a bar with a button to navigate between the tabs of said ion-tab.
You could probably achieve the same behaviour overall of the ion-tab implementing N states that fill the same ion-nav-view and implement the tab-bar yourself at the bottom/top of the page to navigate between those states, but that’s only the appearance and basic navigation, so just stick with the full ion-tab.
Ok thanks for everything 
Using class fade-in-not-out no longer appears to work in beta 14. Using this example but changing the CSS and JS references to beta 14 breaks the animation between tabs.
Or is there a new class or another way to do this in beta 14?
The animations were removed with beta 14 since we’re no longer using them with the new animation system.
We’re hoping to expand them in the future to allow for custom animations soon.
I still can’t make the content to have any sort of animation even copy pasting the code above and using it in the auto-generated template :
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<ion-tabs class="tabs-icon-top tabs-positive fade-in-not-out">
so, is there any proper tutorial about this topic?
Is there some way to animate the transition between tabs?
What about those animations?
when I navigate from a regular page/state to another with tabs, navigation is lost.
I’ve created a simple codePen showing this:
When navigating from HOME to OTHER-PAGE animation and back-button appears, but when navigating from OTHER-PAGE to TABS the animation and back-button is lost.
I have also tried a number of solutions to get views from the tab bar to animate to no avail. Ill try to come up with something in the next couple of days.
Why remove something that obviously worked, at least you could of made it optional?
@casper Can you post a small codepen for this. I can’t get this working at all.
The transition between tabs is such an important feature . applying the class no longer works ; why did they remove it ?