mixin 中的多个过渡属性

Question

我有以下混入：

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

如何更改混入以允许多个属性（即背景和颜色转换）？

Answer 1

这应该有效：

.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-属性的分隔符。此外，您不需要 -ms- 前缀 IE never had it for transitions.

Answer 2

为什么不喜欢这样？

混音：

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

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

希望对您有所帮助

Answer 3

SO 上已经有很多类似的问答 (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 定义不允许你为单个参数指定默认值。显然，如果你将你的 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; 等等，这没有任何意义）

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

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

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

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

-

和往常一样，如果只是关于编写 vendor-prefixing mixins（我猜是），不管以上所有内容 - 只是 stop doing that.

mixin 中的多个过渡属性

Multiple transition properties in mixin

css

less

-

-

-