Using LESS mixin for a transition on multiple properties

Question

I'm currently using this LESS mixin to define transitions on elements:

.transition(@property:left, @duration:0.4s, @delay:0s, @timing-function:cubic-bezier(.16,.53,.15,.99)) { 
    -webkit-transition:@property @duration @timing-function @delay;
    -moz-transition:@property @duration @timing-function @delay; 
    -o-transition:@property @duration @timing-function @delay; 
    transition:@property @duration @timing-function @delay; 
}

In many cases, the timing and easing can keep their default values, so I can simply do something like: .className { .transition(opacity); }

However, I'd like to use this same principle for animating multiple properties, without resulting to using "all". How would I be able to do that?

I've seen this post: Multiple properties are getting treated as separate arguments in mixins , but the solution here requires you to type all the arguments (duration and easing), which is not very practical, especially since I'm using a custom bezier for the easing.

So, basically what I want, is to create a mixin that I can use like this:

 .transition(opacity .4s, transform .2s);

(Also on a sidenote wondering if there's a way to pass "transform" as a parameter, and get an output like -webkit-transition:-webkit-transform and transition:transform)

Answer 1

It could be more simple if you don't not need those defaults, but well:

@import "for";

.transition(@args...) when (default()) {
    .for(@args); .-each(@value) {
        .transition(@value);
    }
}

.transition(@value) {
    transition+: @property @duration @delay @timing;
    @n: length(@value);
    .-(); .-() {
        @property: extract(@value, 1);
        @duration: extract(@value, 2);
        @delay:    extract(@value, 3);
        @timing:   extract(@value, 4);
    }
    .-() when (@n < 2) {@duration: .4s}
    .-() when (@n < 3) {@delay:     0s}
    .-() when (@n < 4) {@timing:   cubic-bezier(.16, .53, .15, .99)}
}

Where imported "for" utility can be found here.

And for vendor prefixes use autoprefixer.

---

Alt. imp. just in case, an alternative implementation almost similar to above but using another approach to apply "default" values:

@import "for";

.transition(@args...) when (default()) {
    .for(@args); .-each(@value) {
        .transition(@value);
    }
}

.transition(@value) {
    @n: length(@value);
    &               {transition+ : extract(@value, 1)}
    & when (@n > 1) {transition+_: extract(@value, 2)}
    & when (@n < 2) {transition+_: .4s}
    & when (@n > 2) {transition+_: extract(@value, 3)}
    & when (@n < 3) {transition+_: 0s}
    & when (@n > 3) {transition+_: extract(@value, 4)}
    & when (@n < 4) {transition+_: cubic-bezier(.16, .53, .15, .99)}
}