css - 使用 LESS mixin 对多个属性进行转换

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

在很多情况下，timing 和 easing 可以保持它们的默认值，所以我可以简单地做这样的事情: .className { .transition(opacity); }

但是，我想使用相同的原则来为多个属性设置动画，而不是使用“全部”。我怎样才能做到这一点？

我看过这篇文章:Multiple properties are getting treated as separate arguments in mixins ，但这里的解决方案要求您键入所有参数(持续时间和缓动)，这不是很实用，特别是因为我使用自定义贝塞尔曲线来缓动。

所以，基本上我想要的是创建一个我可以像这样使用的 mixin:

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

(还有一个旁注想知道是否有一种方法可以将“转换”作为参数传递，并获得像 -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” 实用程序here .

对于供应商前缀，请使用 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)}
}