No back slide animation to parent from child with level >2

1

Hi, I’m not sure if the title is explicit, but i’m facing a situation.
I wonder if it’s normal or not ; if not what am I doing wrong?

I’m using the ionic cordova seed and I have modified one of the tabs with nested states that all render in the same nav-view.

The “tabs.home” (A) as one child “tabs.home.childLvl1” (B) that has itself a child “tabs.home.childLvl1.childLvl2” ©.

When I move from A to B I get a right to left animation, this is what I expect.
When I move from B to C I get a right to left animation, this is what I expect too.
BUT when I move from C to A I expect a left to right animation, because I’m moving to a parent state.

Here is the code :

Any help/advice?!
Many thanks :blush:

2

Hmm, technically it is doing what it is supposed to. Going from level C to level A is technical moving forward in your history stack.

If you were to tap the back button in your header though, you would get the correct animation.

As of now I don’t think theres the ability to specify which direction the transition should go to with out a little hacking.

Hope this helps!

3

Thanks for the answer,
But I thought that going from state C to state A was technically going back to a previous state.
To me it is like 2 backwards done in a single one.
Is it possible?

4

What you could do is tap into ionic’s goBack function, which is how they set up the back buttons in the header. But as it seems, that only goes back one view. I’ve never worked with that before so I would not be the best authority on that.

Maybe @Calendee would be able to help?

5

Good question and thanks so much for the well designed sample. It really helps to understand a problem.

I think the problem is that you are expecting Ionic or ui-router to realize intent. However, that link in the third slide is nothing more than a link. It will not convey intent. So, it just sees it as moving forward, hence the right to left transition.

The back button is designed to manage intent. You click it to go back and so it is designed to do that.

Here is a sample : http://codepen.io/calendee/pen/pGrxl

NOTE : On the third page, the link is replaced with an ngClick. Sorry it lost the styling. Anyway, it gets the back history and goes to it. However, it only goes back one view as that’s what “back” means.

1 Like
6

Thanks @Calendee, this is the implementation that I was thinking of.

7

you will go one step further in the history, if you extend the example of @Calendee to something dirty like that:

$ionicViewService.getBackView().go();
$timeout(function(){
   $ionicViewService.getBackView().go();
   $scope.$apply();
});

Nonetheless, I appreciate the fact that the app is trying to guess for us the correct animation, but sometimes it’s just not doable and it would be great having a way (with an html parameter) which may override the standard animation.

8

Thanks for posting that comment. It spurred me to dig a bit deeper.

There is a way to properly go all the way back in the view history. See this sample : http://codepen.io/calendee/pen/LshaE/

2 Likes
9

Thank you very much guys!
I’ll analyse your answers deeper tomorrow.
@Calendee, your code does the expected :wink:

Nice one!

10

are all these functions (e.g. getBackView, goToHistoryRoot, …) documented somewhere? Couldn’t find them in the official doc.

11

Not in current docs. That might change with the beta release as the devs are adding a lot of self documenting code. I dug these up to help out with this problem.

These are more API commands than what might be expected to use day to day; so, I’m not sure if they’ll get documentation.