Skip to content

Instantly share code, notes, and snippets.

@simonhaenisch
Created March 17, 2018 09:26
Show Gist options
  • Save simonhaenisch/df843aa97f70e500bcea279e06609654 to your computer and use it in GitHub Desktop.
Save simonhaenisch/df843aa97f70e500bcea279e06609654 to your computer and use it in GitHub Desktop.
Add transition mixin/function for Stylus
addTransition(props, duration = 300ms)
// examples:
// - addTransition(color)
// - addTransition(color, 1s)
// - addTransition('color, background-color')
// - addTransition('color, background-color', 500ms)
$parts = ()
for prop in split(', ', props)
push($parts, prop)
will-change: unquote(join(', ', $parts))
$parts = ()
for prop in split(', ', props)
push($parts, (prop + ' ' + duration + ' ease'))
transition: unquote(join(', ', $parts))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment