Upgrade to Beta 14 Navigation and Animations

1

After upgrading to beta 14, I had a few questions regarding the nav flow and animations related to my following codepen.

Click here to see codepen

My questions are

  1. Is there anyway to share nav-buttons in parent states? For example, in my codepen, for the more.html page with 4 tabs, I would like a back button on the left for all child states (tabs 1-4) that would go back to the settings template. Rather than have to add the back button to each child, is there a way i can just have it in more.html?

  2. If I am to add the button to each child state (tabs 1-4), if I just add an actual ion-nav-back-button rather than a primary button that says Back, and then navigate between tab items, the view-title doesnt change.

  3. On the nav-view in the more.html template, I would like there to be no animation when clicking on the 4 icons. setting the nav-transition and nav-direction to none doesnt seem to prevent the forward/back direction. Am I doing something wrong?

  4. From the home page, I would like to be able to hit the settings icon and see a slide up animation. I tried nav-direction enter, swap, exit but they all seem to do the same exact thing which doesnt even look like an animation. Is this a bug or known issue?

Thanks alot for your help.

1 Like
2
  1. <ion-nav-back-button></ion-nav-back-button>
  2. View title was changing for me fine.
  3. Add them to the link, not the nav-view
  4. The slide-up-animation for navigation has been removed for beta 14. We will be expanding animations in future releases
1 Like
3

Thanks @mhartington !

Regarding #1, I actually wanted the back button for the tab items to all go back to settings, rather than to jump around between tab items or view history. So basically the settings will go back to home, but more 1-4 will go all go back to settings. I believe the only way to accomplish this is to paste the primary button in each child view of more.html.

Thanks for everything else! I’ll try to mimic the modal slide up animation. Or is it possible to have the whole settings/more navigation inside a modal? I only care about mobile right now so that may work for me until the slide up animation is added to the framework

Thanks,
Devin

4

Well it’s not going to work that way with how yours tabs are setup.
In that case you would want to use a custom back button instead of the default.

As for having navigation in the modal, it’s not really setup to work that way.

5

follow up question #4, i don’t see any animation for the ‘enter’, ‘swap’, ‘exit’ transitions, only ‘back’ & ‘forward’ do animate. Is it a bug?

1 Like
6

hello? are they meant to be not available yet?

7

hi, may I know whether ‘enter’, ‘swap’, ‘exit’ transitions are meant not to have animations in beta 14? just a simple yes, no question… thanks…

1 Like
8

I also find out that ‘enter’, ‘swap’, ‘exit’ transitions trigger any animations. I also want the answer…

3 Likes
9

+1, enter, swap, exit have no animation for now.

10

+1. What’s up, @mhartington ?

11

+1 ‘enter’, ‘swap’, ‘exit’ not working for me, forward and backward do. That’s with both $ionicViewSwitcher.nextDirection(‘enter’); $state.go(‘app.page’); or a nav-direction=“forward” href="#/home">Home