Skip to content

Instantly share code, notes, and snippets.

@shprink
Created February 16, 2016 16:42
Show Gist options
  • Save shprink/e2396c16a6a6bd8437ae to your computer and use it in GitHub Desktop.
Save shprink/e2396c16a6a6bd8437ae to your computer and use it in GitHub Desktop.
Allow modifying any element by state and avoid CSS leaking
// 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