Thanks guys! animation="slide-left-right" totally works.
I’ll elaborate on WHY I wanted this pattern a little more.
In the app I’m working on we have 3 tabs. 2 of those tabs have list views that then have detail views. I think the default experience with tabs is a little confusing because when users are on a detail view they can still switch to other tabs which seems a little strange. I wanted a more iOS style experience where the detail view animates in and covers the tabs. This means that the user HAS to hit the back button to get back to the tab and cant switch to other tabs while looking at a detail view which I think is cleaner.
I made yet another CodePen http://codepen.io/patrickarlt/pen/jFCnt/ that is pretty accurate to what I want. Transitions are working but now the page transitions only happen every other time. To duplicate click “Go to Bar” (no transition) then “Go to Home” (no transition) then “Go to Bar” (transition) and “Go to Home” (transition). Transitions continue to work every other time.
This is exactly what @perrygovier is seeing in Page transition animation fires every other time which he figured was a bug in nested <ion-nav-view>s or in how <ion-tabs> transitions to and from pages that aren’t its children.
Is this a bug? I feel that I have a pretty minimal test case that proves something weird is going on.