Loss of transition and back button from tab view

If you have a tab view and click on a link that isn’t a child of the tab view it will load in the parent ‘nav-view’ directive which is good. However once that link is clicked you’ll notice that the slide transition isn’t in effect anymore and the back button disappears.

Here is a CodePen to see what i’m talking about: http://codepen.io/vialware/pen/wgmLE

Steps to reproduce:

  1. Click on ‘Sign in
  2. In home click on the ‘No Tab’ button (no transition and no back button)
  3. Click on ‘No Tab 2’ everything returns

Is there a way to prevent the tab view from resetting some type of history? That is my only thought as to what might going on here.

1 Like

I’ve got the same problems.

I have the same problem too.

any update till now?

I’m having the same problem here!

I experience similar things on my app. From what I can see, looking at the example created by the Ionic team, this seems to be “the way” it works, each tab has its own navigation history.

From my own observations, say you have tab A and launch that - there is no back nav until you start drilling down into that tab’s contents. Then you have a back icon which will bring you back to the initial tab content (ie when you tapped it for the first time.)

Then say you have tab B - this does the same thing, independent of A. So you can go A > sub A, then B > sub B, and if you go to A again you get back to A > sub A, ie where you left off in tab A

If anyone can confirm this that would be great!

@kevin432 you’re right, this is how tabs work.

However, the use case outlined here is a bit more complex:

Two views are created:

  • A normal view
  • A view containing tabs

While a transition is being played when the user goes from the normal view to the view containing tabs. None is being played when the user goes form the view containing tabs to the normal view.

That’s the issue we’re having. The behavior you are describing is not an issue.

Hi, sorry I’m not being much help, being a newbie to it.

I too only get a transition (by that i mean slide in) when moving around states within a tab. Going from one tab to another I get no transition.

Yes this is expected, when you switch from one tab to another tab you shouldn’t get any transitions (that’s how it is on iOS and Android)

swaggaguru - Thank you

Is this really the expected behavior? I understand this transition has issues because the notab state is not a sub-child of the abstract tabs state and doesn’t participate in its history:

Sign-In -> Home -> No Tab = Lose the Back Button

<p>
   <a class="button icon icon-right ion-chevron-right" href="#/notab">No Tab</a>
</p>
.state('notab', {
      url: "/notab",
      templateUrl: "notab-page.html"
    })

But consider that this transition also has problems:

Sign-In -> Home -> No Tab -> Go Back -> Scientific Facts = Also Lose the Back button

If you follow that transition, you also lose the Back button, which is bad because tab.facts is a sub-child of the abstract tabs state.

On a mobile device, the user may have very little recourse; in fact it is easy to get into a state where you have no navigation out and your are stuck. The user has to restart the whole app to fix it (most users don’t even know how to shut down an app – so they’ll be stuck forever).

In my own app, I have seen cases where the Back button disappears; thus, I am in this thread and related trying to figure out how and why this happens to try to ensure it is bullet-proof. It seems to easy to shoot yourself in the foot with the navigation here, and it begs for a more robust solution?

still no solutions? this drives me crazy… how can I solve this.

I think the only “solution” would be to implement your own tabs support.

Just add the css stylings for tabs (http://ionicframework.com/docs/components/#tabs) and add routing as you normally would to transition between pages. If you want “no” transition ala tabs then set nav-transition=“none” on the anchor links in the tabs.

You wouldn’t get the per tab history stack but I suspect thats exactly the “feature” people on this thread want to avoid?

thanks! I’m using your solution right now, and seems it is works well!