$ionicConfigProvider views.transition('none') hides all nav-bar buttons

#1

Hello Everyone,

I’m going to try to be as descriptive as possible since I can’t post code or screenshots very easily given my technological situation.

I’ve been tasked with trying to fix the issues with the page transition animations we are having on Android. What we are experiencing is white flashing when you transition from one page to the next or back using the back button. To me this looks like the next page just hasn’t had enough time to load completely so when the transition fires, whatever hasn’t been completely rendered is white during the transition until the page is completely loaded. The effect is very brief but this is what caused me to look into disabling the page transition animations.

In my research, I came across using $ionicConfigProvider.views.transition(‘none’) in the config section of our app and using nav-transition=“none” on individual links.

Both instances do remove the animation but they also either hide or remove my back button, menu button and a help button that we had in our ion-nav-bar. The title in the ion-nav-bar still shows up though.

I’ve been able to recreate this on both iOS and Android using both beta-14 and rc-1. (I updated ionic and isolated it on a separate branch which is how I’m able to test both).

The white flashes don’t show up on my other Android device (Samsung Galaxy Tab [4.2.2]) nor on any of my iOS devices. The white flashes only seem to show up on my Samsung Galaxy S3 (4.4.2) which could be because of the actually device being old and worn or it could be that particular version of Android. Disabling the animations is my primary concern since the white flashes appear to be caused by the device, not ionic nor Cordova.

So my questions are, Has anyone else noticed this behavior while using $ionicConfigProvider.views.transition(‘none’) or using nav-transition=‘none’ per link?, Is there a way to work around this to get my buttons to show up while disabling the transition animation?, and if not then is there an alternative to disabling / changing the transition animation that I haven’t considered and that would perform better on Android.

#2

After some more investigation, it seems that $ionicConfigProvider doesn’t like the ‘none’ input for view.transition(). I was able to put any random string into that function and I get the same result. No animations but no nav-bar buttons as well. Inputs such as ‘ios’, ‘android’, and ‘platform’ work but anything else results in no animation and no nav-bar buttons.

#3

I am having this same problem. Has anyone found a way to remove the transitions while keeping the header/nav bar intact?

#4

Yes I actually just recently figured it out. What the issue was how my ion-nav-bar was laid out in my menu.html.

Basically what I did was remove the ion-header-bar I previously had containing the app name and replaced it with a ion-nav-title element. So the issue was that I had a bar inside of my ion-nav-bar so when the page transitioned with the transitions set to none then the inner bar (my ion-header-bar) would cover up the ion-nav-bar and the buttons.

So make sure you don’t have any bars in your ion-nav-bar or any other elements that could cover it.