Is there an easy way to set a transition direction on a link?
e.g. mostly links have new content coming in on the right, and back button the content leaves on the right. This happens automatically, which is great.
But occasionally, e.g. a “home” link, I want to force that the content leaves on the right, and the home content comes in from the left (i.e. like the back link direction). But because its a link, the content tends to arrive from the right, the opposite of what I want, when going up a navigation tree.
Presumably there must be a means on the link to set the transition direction?
Sorry, new to Angular and new to Ionic so this may be really obvious.
This one I’ll pass on to @adam who built the nav system. I believe you could just add the reverse class to the nav-view when you you want to change the direction manually. Maybe using some DOM modifications. Perhaps there is a way for us to change this more easily?
This is a big one for me. The animation direction will often go left to right even when travelling back through the navigation stack.
Any work arounds to this?
I wound up changing the UX flow of my app so that it didn’t really make a big difference anymore. What I had found out is that navigation animations are grouped by tab groups as each tab group has its own “history”. A navigation to the page you were just on triggers a backwards step in that history and a backwards animation. Interestingly, if you load a child page directly, the back button will trigger a forward animation.
More to the point of the thread, left/right page animations are closely tied to the tab bar directive in Ionic. If you want to animate between pages in a manner unlike its default behavior, you’ll likely have to roll your own. There’s some reusable bits to Ionic that you can use, but it would be a new thing (directive/service).
These are my findings, but I’m still pretty new to Ionic, so take it with a grain of salt.
The main issue is if you skip a navigation step the automatic animation based on history is wrong.
Eg. If you have an A -> B -> C navigation stack and you link directly to B from somewhere (skipping A), then going B -> A triggers a forward animation. which is very disorienting for the user.
@adam/@max: Any updates on this? In my app I sometimes have to jump back two or more steps in history, and afterwards the view transitions go in the wrong direction. Is there any way to reset/clear the history once the user gets back to the home screen in the app?
Your links aren’t getting the “back” animation you expect because they are links. Links mean go forward. So, a link can’t understand your intent to go backward.
Look at the code for the last page in the example. It uses the history to actually go back and provides the correct animation.
Thanks for the advice. I have a similar problem in which the step back is a logical one and not necessarily in the view history. I have a list and a detail view of a list element. Now I implemented in the detail view two fast navigation buttons (left and right) to change to the detail view of the previous list element respectively of the next list element without having to return to the list view. And the back button of the detail view always returns to the list view, not to the detail view last shown. I got all this working but not the back animaton for going to the previous list element. How can I do this?
Negative, currently I’m carrying on with other development and hoping something comes from this thread in the mean time!
For the most part the transitions are fine apart from my bespoke back button where it tends to guess incorrectly that I’m going forward rather than back. In this case wherever I have this button I’d like to force a particular direction (such as right to left)