My app uses a nav-bar and has a button for a side-menu on the home screen. When navigating back and forth to/from the home screen, the side-menu button is replaced by the nav-bar’s ‘back’ arrow.
Everything is functional, but due to the animations when navigating between pages, the two icons clash and overlap for a brief second before switching. An example of this behaviour can be seen in this clip: http://cl.ly/2N2P0B0J1I2t
Is there any way to speed up this transition and prevent the overlap?
Thanks!
It’s pretty hard to tell what’s going on there from the video. But, I think I know what you are talking about. The side-menu button is actually not getting replaced. It’s just getting pushed to the right to accommodate the back button.
However, on a small screen, it looks as if the menu button has disappeared because the main content area has been pushed to the right.
Here’s an example : http://plnkr.co/edit/Qpbt4VAnKMzXmpP9PSng
A possibly not so great fix is in this demo. http://plnkr.co/edit/0NRwa0JqWgbKfJPGGAJM
It puts an “x” in the side menu, so the user can still use a button to close it when the back button is visible. They don’t really NEED the button as they can swipe to close, but some users may not be aware of it.
Overall, I’m sort of sick of the back button concept. It really clutters up the UI. I’m going to remove it from my app completely. Unfortunately, with the current version of Ionic, I can’t find a way to remove it.
Thanks for this. Yeah, sorry, the video wasn’t the greatest, but your example pretty much summed it up.
Starting to think the side-menu may not be the best solution for my problem anyway, so I may try my luck with a combo of nav-bar and tab bar.
As for your back button problem, I’ve had luck with applying hide-back-button="true" to my nav-page. Seems to do the trick, unless I’m misunderstanding!
Cheers.
Unfortunately, I can’t get hide-back-button to work in the 0.9.19 release.