相关疑难解决方法(0)

我正在尝试编写一个mixin,但我似乎无法按照我想要的方式获取参数:多个属性被视为一个单独的参数.

现行守则

.transition(@property: all, @time: 1s, @timing: ease-in-out) {
    -moz-transition: @property @time @timing;
    -webkit-transition: @property @time @timing;
    -o-transition: @property @time @timing;
    transition: @property @time @timing;
}

a {
    .transition(color, opacity, .5s);
}

期望的输出

a {
    -moz-transition: color, opacity .5s ease-in-out;
    -webkit-transition: color, opacity .5s ease-in-out;
    -o-transition: color, opacity .5s ease-in-out;
    transition: color, opacity .5s ease-in-out; 
}

实际产出

a {
    -moz-transition: color opacity .5s;
    -webkit-transition: color opacity .5s;
    -o-transition: color opacity .5s;
    transition: color opacity .5s;  
}

有任何想法吗？

假设我有2个DIV:

?<div class="div1"></div>
<div class="div2"></div>??????????????????????????????

我想要旋转它们:

div {
    position: absolute;
    width: 100px;
    height: 100px;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

然后我想独立移动它们:

.div1 {
    background-color: red;
    -webkit-transform: translate(100px,0px);
    -moz-transform: translate(100px,0px);
}
.div2 {
    background-color: green;
    -webkit-transform: translate(0px,100px);
    -moz-transform: translate(0px,100px);
}?

问题是旋转和移动都使用transform属性,因此移动会覆盖旋转.是否有可能使值堆叠在一起而不是相互覆盖？

注意:
我将使用复杂的变换函数,而不仅仅是简单的翻译,所以我不能用just left和topproperties 替换它们.
我有很多 DIV,因此在分配各自的属性之前,选择所有这些DIV并应用它们的公共属性会更有效.

参考:jsFiddle