Created
February 16, 2016 16:42
-
-
Save shprink/e2396c16a6a6bd8437ae to your computer and use it in GitHub Desktop.
Allow modifying any element by state and avoid CSS leaking
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// JS | |
$rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState, fromParams) => { | |
// Add a timeout for ionic transitions | |
// For 500ms we will have both module classes | |
// so both modules will have the right css | |
// when transitionned we remove the previous module class | |
clearTimeout(stateChangeTimeout); | |
stateChangeTimeout = setTimeout(() => { | |
$document.find('html').removeClass(`${_.kebabCase(fromState.class || fromState.name)}`); | |
}, 500); | |
$document.find('html').addClass(`${_.kebabCase(toState.class || toState.name)}`); | |
}); | |
// CSS (SASS for nesting) | |
html.app-name-of-your-state { | |
// nested style | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment