Box-shadow and paint triggers: remove/state transition/restore?


#1

I’m looking for the lightest/unobtrusive/scalable way to globally remove box-shadow (and other frame spikers) from all eligible DOM elements, before state transitions happen, as they make the slide animation occuring between the two states jag a little.
And of course put them back on when the view’s template has finished loading (transition to next route is finished).
I could attach some ng-class here and there, but that means adding a bunch of watchers to the controller’s payload.

Any concepts/ideas on how/where I should trigger this?

Currently I’m using

.run(function($ionicPlatform, $rootScope, $state, $stateParams, $timeout, $translate) {

	
 $rootScope.$on('$stateChangeStart',
        function(event, toState, toParams, fromState, fromParams){ 
		$rootScope.$emit('rootScope:toState', toState.name, toParams);	
                    ...
    	});
	
	
 $rootScope.$on('$stateChangeSuccess',
        function(event, toState, toParams, fromState, fromParams){ 
		...	
    	});		

… But .run seems a very bad place where to apply DOM modifications to the current/next template.


#2

I am also interested in this. Adding box shadows during transitions is dogging my app’s perf. I prefer not to use !important since the box shadows are added inline by ionic but I don’t know how else to override except for using !important