-

Question

我有以下mixin：

.transition (@property, @duration: 0.2s) {
    -webkit-transition: @property @duration ease-in-out;
       -moz-transition: @property @duration ease-in-out;
        -ms-transition: @property @duration ease-in-out;
         -o-transition: @property @duration ease-in-out;
            transition: @property @duration ease-in-out;
}

如何更改mixin以允许多个属性（即背景和颜色过渡）？

Answer 1

在SO已经有很多类似的Q＆amp; A（for instance），但由于其中大多数都充满了过时（错误）的信息和黑客，因此我想写一个新答案是有意义的：

-

那么，您需要决定是否希望mixin将每个属性值检测为单个参数（具有可选的默认值）或者只是将它们全部传递（这些是不兼容的要求，它们仍然可以组合它们 - 见后文。）

在最简单的情况下，mixin应该定义为：

.transition(@values) {
    transition: @values;
}

只不过是这样，并且像这样使用：

.transition(width);
.transition(color 0.2s ease-in-out);
.transition(opacity 2s ease-in, height 5s ease-out;);
// etc.

请参阅the documetation关于使用逗号分隔列表作为mixin参数。

-

现在将单个值作为单独的mixin参数和默认选项。（老实说，对于我来说，盲目地为每个单一混合的每个单一参数设置一些相当随机的默认值的倾向看起来像一个常见的反模式，但无论哪种方式）。您可能会注意到上面的mixin定义不允许您为各个参数指定默认值。显然，如果你将mixin定义为：

.transition(@property, @duration: 0.2s, @timing: ease-in-out) {
    transition: @arguments;
}

（或类似）它不能再处理多个属性（@duration和@timing将无法匹配相应的参数，无论您使用什么语法来调用它（仅有少数特定例外）。 .transition(opacity 2s ease-in, height 5s ease-out;); 会导致 transition: opacity 2s ease-in, height 5s ease-out 0.2s ease-in-out; 等等没有任何意义）

因此，如果你仍然需要两者（再次不计算这通常使得混合使用不确定和混乱）你必须发明一些方法以某种方式处理这两种变体。例如，最简单的方法（只有几个可能的变体之一）只是为第一个参数中的不同数量的值提供不同的定义（参见conditional mixins），例如：

.transition(@property, @duration: 0.2s, @timing: ease-out)
    when (length(@property) = 1)  {
        transition: @arguments;
}

.transition(...) when (default()) {
    transition: @arguments;
}

使用与上述相同，除了.transition(width);（和类似的东西）现在有不同的结果。

-

与往常一样，不管上述情况如何，如果它仅仅是关于编写供应商前缀mixins （我猜它是） - 只是stop doing that。

Answer 2

这应该有效：

.transition (@property; @duration: 0.2s) {
    -webkit-transition-property: @property;
       -moz-transition-property: @property;
         -o-transition-property: @property;
            transition-property: @property;
    -webkit-transition-duration: @duration;
       -moz-transition-duration: @duration;
         -o-transition-duration: @duration;
            transition-duration: @duration;
        -webkit-timing-function: ease-in-out;
           -moz-timing-function: ease-in-out;
             -o-timing-function: ease-in-out;
                timing-function: ease-in-out;
}

.test {
  .transition(color, background; 3s)
}

这里最大的诀窍是使用分号作为mixin的分隔符，这样我们就可以使用逗号作为transition-property的分隔符。此外，您不需要-ms-前缀IE never had it for transitions。

Answer 3

为什么不喜欢这个？

密新：

.transition(@transition) {
  -webkit-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

并使用它：例如：.transition(~"color ease-in-out 1s, background-color ease-in .5s");

希望有所帮助

mixin中的多个过渡属性

3 个答案:

-

-

-