A LESS mixin for a transition with a prefixed transition-property
8 years ago
The most common mixin you will find in LESS for CSS3 transitions is something like the following:
.transition (@prop, @time, @ease) {
-webkit-transition: @prop @time @ease;
-moz-transition: @prop @time @ease;
-ms-transition: @prop @time @ease;
-o-transition: @prop @time @ease;
transition: @prop @time @ease;
}The proplem with this is that if you want to transition a property that requires a prefix such as transform:
.transition(transform, 0.5s, ease-out)You will end up with:
-webkit-transition: transform 0.5s ease-out;
-moz-transition: transform 0.5s ease-out;
-ms-transition: transform 0.5s ease-out;
-o-transition: transform 0.5s ease-out;
transition: transform 0.5s ease-out;This is not what you want, you need to have the transition-property prefixed as well as the transition. Below is a mixin that I came up with that will solve this problem:
.transitionPrefixProp (@prop, @time, @ease) {
-webkit-transition: e("-webkit-@{prop}") @time @ease;
-moz-transition: e("-moz-@{prop}") @time @ease;
-ms-transition: e("-ms-@{prop}") @time @ease;
-o-transition: e("-o-@{prop}") @time @ease;
transition: @prop @time @ease;
}Which will output:
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-ms-transition: -ms-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
transition: transform 0.5s ease-out;This is kind of a brute force approach by adding all prefixes regardless of whether they are required, but it does work well.
