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

但是，我想使用相同的原理来动画多个属性，而不会导致使用“all”。我怎么能这样做？

我看过这篇文章：Multiple properties are getting treated as separate arguments in mixins，但这里的解决方案要求你输入所有的参数（持续时间和缓和），这不是很实用，特别是因为我使用的是自定义bezier宽松。

所以，基本上我想要的是创建一个我可以这样使用的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。以防万一，替代实现几乎与上面类似，但使用另一种方法来应用＆＃34;默认＆＃34;值：

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

使用LESS mixin进行多个属性的转换

1 个答案: