bug: No view transitions when going to/from tabs

[mhartington]

Type: bug

Platform: all

Codepen http://codepen.io/mhartington/pen/zxdGKd

If you navigate to and from tabs, there are no view transitions. Also, the back button will not show either.

[CoenWarmer]

I think this Codepen describes the issue a bit better: http://codepen.io/squrler/pen/xbLbgV

[LanceEa]

I'm seeing the same issue. My issue is the same as the exmaple in @CoenWarmer codepen. Specifically the example of "non nested views".

Off the top of my head I would think it has something to do with navigating to an "abstract" state since you are technically going to one of its children (aka the first tab).

An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated. -- Ui-Router Documentation https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

[CoenWarmer]

This used to work in all Ionic versions before beta 14, so in a way it's actually a regression which makes updating our apps especially difficult.

[CoenWarmer]

Funny, just realized I noted this over a year ago: https://github.com/driftyco/ionic/issues/437

[adamdbradley]

An abstract state isn't a view, but a container of views. Let's say you had 3 tabs, and you go to tab 1 page 1, then tab 1 page 2, then to tab 2 page 1. At tab 2 page 1 you should not have a back button because you switch histories to another tab. This is by design, and exactly how native apps works. If that back button did exist between tabs then it wouldn't know which "back" you mean. Should it go back a page in the same history? Or should it go back to another history?? Again, this is following native's design because there are multiple histories, not a linear one like a standard browser has.

As for the view transition, that too follow's native's default design pattern. However, I'm planning on making it easier to give it a transition if you want.

[CoenWarmer]

The back button not appearing is less of a problem, since there are a couple of different ways to influence that when you really need one.

I'm just really looking for animations between states that may or may not have tabs. If it's easier to only enable that when the state with tabs only uses non-abstract states, that's great. Basically how it used to work in beta 13 :)

[CoenWarmer]

Possible duplicate: https://github.com/driftyco/ionic/issues/3135

[CoenWarmer]

It would be so, so nice if we could get some traction on this..... It's the one thing that's keeping three of our apps to be upgraded to beta 14... Pretty please? :)

[beauby]

Adding the possibility to animate transitions between tabs would, indeed, be great. That, and the ability to swipe between tabs.

[CoenWarmer]

@beauby you misunderstand: this issue is to describe the behavior where state 1 does not contain tabs, and state 2 does contain tabs. If you navigate from state 1 to state 2, in beta 14 there is no transition animation. You immediately are dumped to state 2.

This issue is not about having an animation between tabs on one state. That is not something that native UI frameworks use as default and so not something I expect ionic to support out of the box.

[PedroJusto]

@beauby , @adamdbradley here is a very simple codepen demonstrating what @CoenWarmer is talking about. Like @CoenWarmer , I understand that there is no transition animation between tabs makes sense. An abstract state and his childs should be seen as one. But if you transition from "STATE1"to another "STATE_WITH_TABS" ,it should have 'navigation' and in his tabs the back button should go back to "STATE1".

http://codepen.io/anon/pen/Qwzama 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.

[CoenWarmer]

Still an issue in the nightly... (rc1 >)

[hardywu]

@adamdbradley I do not have a full native app dev experience. But from years' experience of using native app, it tells that going from state 'tabs.home' to state 'login' does give users a back button.

Just wonder if this bug is ignored due to some misunderstanding.

[sgentile]

same issue as above...

@beauby , @adamdbradley here is a very simple codepen demonstrating what @CoenWarmer is talking about. Like @CoenWarmer , I understand that there is no transition animation between tabs makes sense. An abstract state and his childs should be seen as one. But if you transition from "STATE1"to another "STATE_WITH_TABS" ,it should have 'navigation' and in his tabs the back button should go back to "STATE1".

http://codepen.io/anon/pen/Qwzama 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.

[sgentile]

I should add, the issue I'm referring to is the 'back-button is lost'

[stefek99]

+1

back-button is lost

Yes, I've seen that I was really confused why is this happening.

Here is the example I used as a base in my project: http://codepen.io/gnomeontherun/pen/tbvdH?editors=101

• When I click on a tab - no back button.
• When I click on a link on the page - there is back button.
• When I click on a item in the side menu - no back button.

Short video: http://screencast.com/t/0gsoogJf

[rubocoptero]

@sgentile that is exactly the same issue I'm facing right now!

+1

[colesobotka]

I'm having a very similar problem, but not sure if it's the same as others.

I have two main states: 1) Tabs 2) options

All I want to be able to do is navigate from the Tabs state to the options state WITH an animation, but for the life of me I cannot force one. I can manually add the back button to the options page, but again, I'm missing all of the animations.

I also do not want to implement a "Hamburger" menu, but I guess I will if I have to. I think that navigating away from a tabbed interface and being able to go back is completely acceptable for UX. However, I agree that it's a bit odd to navigate TO a tabbed interface and have a back button included.

[yxwu25]

+1

[JerryBels]

+1

[kaumac]

It seems theres a lot of issues in this issue (lost back button, no transitions when going to tabs view and no transition when through tabs)

What annoys me right now is the lack of transitions between tabs.

So +1 here

[JerryBels]

In my case it's really an issue :

• I have two tabs, which display a list of images
• When tapping on an image I change state, get out of the tabs to display the page dedicated to this image (comments, like, etc...)

No back button, no animation !

Here is a codepen very little modified from the original "tabs and navigation" : http://codepen.io/JerryBels/pen/qdOqMb

Simply clic on "go to photo state" to see that there is no back and no animation.

[itrethan]

+1

[DongHongfei]

+1

[michahell]

+1 I think this issue has soo many different names / threads both here on github and ionic forum :( I hope this gets solved soon :(

[mhartington]

This issue will be address post 1.0. Right now, this is a limitation of ui-router and we will be addressing this.

[michahell]

Ah, I suspected there was some deeper reason why this was not possible. thanks @mhartington for clearing that up!

[JerryBels]

@mhartington thanks, I hope we'll see a solution soon enough !

[adamelevate]

+1

[PhoenixHe-NV]

I have created a pull request but it failed on tests... It seems like that's "by design". Should I modify the tests?

[JerryBels]

Referencing this issue in the forum : http://forum.ionicframework.com/t/back-button-with-nested-states/16017

Looks to me the same topic.

[sherlock221]

+1 same

[zero7u]

@JerryBels +1 same here! Is it possible to control the history navigation and transitions by ourselves? optionally? https://github.com/driftyco/ionic/issues/3810 e.g. $ionicHistory.goBack([backCount], [transition])

[dasgib]

+1

I'm especially interested in the transition, rather than the history.

[nihgwu]

is there a workaround solution?

[adamdbradley]

Regarding transitions between a non-tabs view and a tabs view, in the current architecture this is challenge due to how the tabs are nested, and a tab is nested inside of tabs. A lot of the limitations are due to how the leaving view is the container for the entering view. The core structure to how transitions and animations works will updated in Ionic 2.0 to allow for any transition between any view. I'm going to change this milestone to 2.0.

[JerryBels]

@adamdbradley thanks for passing by to keep us updated. I understand very well what you say, and that you don't want to work on something that will be solved with a future version. But, if I'm not wrong, Ionic 2.0 will be based on Angular 2.0, right ? There is two big problems for us with that, then :

• Migrating to Angular 2.0 from a current Angular app is already known to be something that will be very hard, if even possible.
• It's not even close to release, let alone ready for production use... And we're speaking of production apps that currently lack the beauty and smoothness of native. At least I know that if no decent workaround is given here, I will have to look for a custom hacky solution.

Anyway, thanks again for your work for us :)

[michahell]

Aha, that makes a lot of sense. I myself was thinking of the following approach:

1. create screenshot of current view that is going to be removed.
2. overlay the screenshot on top of all views (is this possible? maybe outside angular/ionic?)
3. animate the screenshot out when the next view (in this case the tabbed view) has loaded.

This maybe goes against standard conventions of using css / svg for animations, but it has solved animation problems in the past for me with other frameworks and non-mobile applications... Benefit of this method is that it does not care at all what view will be transitioning out, and what view will be transitioning in.

I might be able to work on this next weekend!

[JerryBels]

@michahell if you really do find a solution, please share it with us ? :)

[michahell]

@JerryBels of course! I'll know this weekend ;)

[levinmr]

+1

[dellheng]

+1

[ashishdasnurkar]

+1 If I go from a simple no-tabs state to a tabs state the default tab view should show a back link to the previous state. Otherwise without giving a custom button within tabs view there is no way back for the ios user at least.

[zero7u]

Is there a way to hide the tabs bar manually? Just like this demo: http://codepen.io/ionic/pen/mHtlC

[beauby]

@zero7u Add class="tabs-item-hide" to <ion-tabs>.

[zero7u]

@beauby Thanks! Base on this idea, I made a solution for my app, say something about it, please! http://codepen.io/zero7u/pen/qdXZVW

[michahell]

I haven't been able to spend time on my ionic project this weekend unfortunately, but what @zero7u made looks pretty good actually!

[evertoncorrea88]

I'm having the same problem, but in the opposite direction. I have 2 states:

• State 1: 3 tabs and a button on the top header to State 2;
• State 2: a simple list. There is no back button when I navigate from State 1 to State 2.

I was thinking to save the current link when I press the button and send this information to State 2, and in State 2 use this link to set the back button. Is that a valid work around or is there any easiest way?

[lbickston]

+1

[thinkAjith]

+1