Problem with transition between abstract views

ionic-v1
1

Hi guys! I have some problems using Ionic, I hope Ionic team can help me with this.

My app context

In my app, I have two abstract views, the first has a tab menu, and the second doesn’t have anything just an ion-nav-bar, I use this to change from a state with tabs menu to another with anything I want in the footer with ion-footer-bar. For example, in a Question state I have a “Answer” button in a ion-footer-bar. So my app change from tabs.timeline (which has a tab menu) to app.article (which has a footer ‘main’ button)

How to reproduce

I made this codepen to reproduce the issue http://codepen.io/felquis/pen/ogLYJE

Problem 1

  1. Open the no iframe version http://s.codepen.io/felquis/debug/ogLYJE
  2. Open the DevTools (Chrome) and emulate a iPhone 5 device and reload the page.
  3. The app start with no tabs, (like a login state)
  4. Here is the problem Click “go to app” (verify a black screen appeared in the leaving state)
  5. Navigate between the tabs, check that the transitions works fine.
  6. Here is the problem Click at any ‘Click here’ button (this will change the abstract view), note what happens to the leaving state.
  7. Mysteriously, when you use the back button, the transition to the previous abstract view, works as expected.

Problem 2

Reload the no iframe to the start http://s.codepen.io/felquis/debug/ogLYJE

  1. Click ‘go to app’
  2. The tabs.home is loaded
  3. Here is the problem Click in ‘Click here’

During the transition the leaving state doesn’t turn black like before, but the leaving screen turn the app.login state with the red button and should be the tabs.home screen leaving with the green button.

Problem 3

Reload the no iframe to the start http://s.codepen.io/felquis/debug/ogLYJE

  1. Click ‘go to app’
  2. Click in ‘Click here’ green button
  3. Click in the back button
  4. Now, click at profile in the tabs
  5. Now, click at Config in the tabs
  6. here is the problem, click at Home

Note that the leaving state stay above the entering state with an opacity before disappear.

Possible problem 4

I can’t put tabs markup inside a ion-footer-bar tag? I need to use ion-footer-bar to Ionic correctly calculate the scrollable size of the screen, but the tabs inside ion-footer-bar seems broken as well as the .button-full that doesn’t fill wall the width of the footer.

The .button-full is in the view app.oi, URL http://s.codepen.io/felquis/debug/ogLYJE#/app/oi/test/

…

I know I’m possible implementing Ionic wrong, but, the transitions between the states seems very correct, one state I need tabs and here I have navigation, another state I need anything, and here my apps continues to navigate correctly, with tabs the tabs doesn’t change etc… (I don’t have enough words to explain). It makes me feel that this is a problem with Ionic, not in my implementation of Ionic :slight_smile:

Hope this help improve Ionic in some way.

2

I have the same problem

image
Capture.PNG982×241 43.1 KB

As you can see transitions were added to the parent and to the its child (???)

However, if I go back then again navigate to the that state it will place the styles in a correct way

1 Like
3

Here is a related issue https://github.com/driftyco/ionic/issues/2843

4

I had this black screen translation issue when navigating from any state to a state that has a parent abstract state …
example from state ‘landing’ to 'abstract.child’
what solved this issue for me is simply removing the ’ abstract : true ’ from my $stateProvider and i don’t really navigate to the abstract state anyway
i don’t know if this causes any performance issue. but since i am handling the code i know that this state is abstract and i won’t navigate to it anyway.

5

I can confirm that removing abstract: true from the angular ui-router state solves the problem.

6

i want to be sure that i can not reach abstract states -> i added a custom field to any abstract states, so i can listen to “$stateChangeStart” and check there if it is abstract and route to default state.

7

Anyone found a better solution to this? I also get the black frame issue on navigating to abstract states

8

Ok I think I’ve found a better solution, still a hack but will do until a proper solution comes from Ionic,

what I did is add a new state with a template containing only a ‘<ion-nav-view></ion-nav-view>’ and added it as the parrent of the abstract like so…

.state('app', {template : "<ion-nav-view></ion-nav-view>"})

and then made all other views children of this parent state, this seems to have resolved it

9

Removing abstract: true fixed the issue for me too. It’s weird and I am not sure what could be the consequences of not defining the parent state as abstract anymore.

10

can you show an example of how you can do a tabbed structure with list views and individual item views inside the tabs without using abstract?