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)

seven-phases-max · Accepted Answer · 2014-05-08T06:36:14.600

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)}
}

Using LESS mixin for a transition on multiple properties

1 Answers1