使用LESS混合in在多个属性上进行转换

Question

我目前正在使用这个LESS mixin来定义元素上的转换：

.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; 
}

在许多情况下，计时和放松可以保持它们的默认值，所以我可以简单地做一些事情，比如：.className { .transition(opacity); }

然而，我希望使用相同的原理来设置多个属性的动画，而不会导致使用"全部"。我该怎么做？

我看过这篇文章：在mixin中，多个属性被视为单独的参数，但这里的解决方案要求您键入所有参数(持续时间和缓和(，这不是很实用，尤其是因为我使用自定义bezier进行缓和。

所以，基本上我想要的是创建一个我可以这样使用的混合体：

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

(另请注意，是否有方法将"transform"作为参数传递，并获得类似-webkit-transition:-webkit-transform和transition:transform的输出(

Answer 1

如果你不需要这些默认值，它可能会更简单，但好吧：

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

此处可以找到导入的"for"实用程序。

对于供应商前缀，请使用autoprefixer。

---

备选方案。imp.以防万一，一个与上面几乎相似的替代实现，但使用另一种方法来应用"默认"值：

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