Created
July 29, 2018 22:53
-
-
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
This file contains hidden or 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
// 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