Skip to content

Instantly share code, notes, and snippets.

@mnjul
Created July 29, 2018 22:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mnjul/123443d1ebc5fcc761bd374950c6aa47 to your computer and use it in GitHub Desktop.
Save mnjul/123443d1ebc5fcc761bd374950c6aa47 to your computer and use it in GitHub Desktop.
LESS Mixin for Multiple Transition Properties under Same duration, timing-function and delay; See https://medium.com/@mnjul/less-mixin-for-multiple-transition-properties-under-same-duration-timing-function-and-delay-15e1aa18543a
// Apache License: https://www.apache.org/licenses/LICENSE-2.0
// For LESS version > 3.0.0, please turn on a flag to enable inline JavaScript:
// http://lesscss.org/usage/#less-options-enable-inline-javascript-deprecated-
.uniform-transition(...) {
transition: ~`(function(lessArgsStr){
var lessArgs = lessArgsStr.substr(1, lessArgsStr.length - 2).split(','); // Or use regexp
return lessArgs
.splice(1)
.map(function(prop){ return prop + ' ' + lessArgs[0]; })
.join(',');
})('@{arguments}')`;
}
.first-box {
.uniform-transition(0.4s linear 0.1s, height, width);
}
.second-box {
.uniform-transition(0.4s linear 0.1s, height);
}
.third-box {
.uniform-transition(0.4s, height);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment