A LESS mixin for a transition with a prefixed transition-property
4 years ago
The most common mixin you will find in LESS for CSS3 transitions is something like the following:
1 2 3 4 5 6 7 | .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:
1 | .transition(transform, 0.5s, ease-out) |
You will end up with:
1 2 3 4 5 | -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:
1 2 3 4 5 6 7 | .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:
1 2 3 4 5 | -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.
