How to disable page transitions? (too slow to put into production)

How can i disable the page transitions in ionic? I’m getting a 1-2 second delay after clicking a link before something happens. I would prefer it to just click and display as any standard webpage.

You’re seeing such a delay because of the time it takes your new page’s DOM to be compiled & inserted.

For now: try making less load at once on the new page:

Later: we have a few solutions planned for this problem.

I found that switching from the default sliding animations (which were just a bit too jumpy for my liking) to ‘fade-in’ has worked quite nicely. The fade animation is barely perceptible and looks pretty good. Might want to give it a try rather than no animation.

Do you have animation="???" in your <ion-nav-view>? If so, just delete it and you will no longer have animations.

2 Likes

If you want to completely disable transition animation then you can state this inside the .config of your app:

$ionicConfigProvider.views.transition(‘none’);

2 Likes

Hi udi!

Do you know if it is still possible to do this? I tried setting my animations to “fade-in” like this: $ionicConfigProvider.views.transition(‘fade-in’), but it didn’t seem to work… It just defaulted to no animation. Is there anything outside of this that I need to do for the fade-in animation to work?

Thanks!!

Hello, I’m getting the same issue!

I’ve used $ionicConfigProvider.views.transition(‘none’); but…

The problem of removing the animation is that my custom nav title flicks every time I change the pagem, If I use cache, seems to be fix the problem, but I cant cache my pages because they changes all the time.

I too wish to disable animations and I have come across and tried $ionicConfigProvider.views.transition(‘none’). It does remove the animations but it also removes any buttons I had in my header. So my sidemenu, back and help buttons disappear when views.transition is set to none. Has anyone else experienced this because I have yet to find anything on fixing it or what the cause might be.

Our app was built off of the side-menu starter and is currently using rc.2.

1 Like

I 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.

I think i know, try use "nav-transition=“none” like this:

No animation

See: http://robferguson.org/2015/07/31/animation-for-ionic-apps/

and: http://blog.ionic.io/animating-elements-in-your-ionic-app/

You can disable it only if device grade is worst than ‘a’:

.run(function (....,  $ionicConfig) {

            $ionicPlatform.ready(function () {

                if (ionic.Platform.grade.toLowerCase()!='a') {
                    $ionicConfig.views.transition('none');
                    console.log('Ionic Platform Grade is not A, disabling views transitions ');
                }

Anyone able to get fade In effect on state transition?