Force view to render before starting transition animation

ionic-v1
1

I have a page that changes it’s background colour based on dynamic data loaded via angular.

Becuase this data (the colour to change to) is not applied from the start of the view life cycle, the page flashes as it changes colour, during the view transition.

I am wondering if I can change the ordering of the page init cycle, so that the page is rendered before the animation starts?

This is in a tabbed navigation layout.

1 Like
2

I would try one of these

  • route resolve
  • $ionicView.beforeEnter event
1 Like
3

EDIT - This now seems to not be needed with latest version of Ionic, and in fact was causing a bigger problem than it solved.

Thanks, seems like this page shows me the hack that I need.

4

I’m having the same issue now.

I’ve moved my data and style requests to a resolve on state but I seem to get a “blank glitch” when I navigate between tabs.

I have tab navigation and then a nested navigation. On the nested navigation the glitch doesn’t occur.

    resolve: {
            themeColor: ['$atAssets',function($atAssets) {
                return $atAssets.getThemeColor;
            }],
            backgroundImage: ['$atAssets',function($atAssets) {
                return $atAssets.getBackgroundImageUri;
            }],
            featureContent: ['atContent',function(atContent) {
                return atContent.getFeatureJsonByName(featureName).then(function(featureJson){
                    return featureJson;
                });
            }]
        }

All three return promises.

It worked fine without the glitch, when I was loading this from each controller but I want to have this the angular/ionic way (if possible).

I’m on the latest ionic release : 1.0.0-rc4