css - Twitter bootstrap .transition 的多个转换？

Question

我想在 Bootstrap v2.1.0 中为两个属性设置动画，

opacity和margin。_

我试过了：

.transition(opacity 0.5s, margin 0.25s);：无输出
.transition('opacity 0.5s, margin 0.25s');：无效的 CSS 输出
.transition(opacity 0.5s); .transition(margin 0.25s);：边距覆盖不透明度。

请注意，我使用的是lessphp，因此使用 JavaScript 正则表达式的解决方案将不起作用。

我知道我可以复制 mixin 并对其进行修改以接受两个参数，但这看起来很老套，肯定有更好的方法吗？

Answer 1

两个选项（取决于 LESS 的版本）

少（1.3.3+）

less2css.org显示这适用于LESS 1.3.2 的实验，但问题文档似乎表明这是1.4 版本添加。

每当它变得有效时，在某些时候，分号被引入作为参数混合中可能的变量分隔符，同时仍然允许逗号。a 的存在;导致逗号不被视为分隔变量，而是变量本身值的一部分（逗号分隔列表）。然后，这允许（引用该站点）我们使用“虚拟分号创建带有一个包含逗号分隔的 css 列表的参数的 mixin 调用”。

因此，以下工作可以在没有转义字符串的情况下产生与上面相同的输出（注意“虚拟”分号放在变量条目的末尾，就在参数 mixin 调用的右括号之前）：

.transition(opacity 0.5s, margin 0.25s;);
                                      |
                                semicolon here

LESS（1.3.3 之前，但也适用于更高版本）

~对传入的变量进行字符串插值 ( )：

.transition(~"opacity 0.5s, margin 0.25s");

两种解决方案都输出：

-webkit-transition: opacity 0.5s, margin 0.25s;
-moz-transition: opacity 0.5s, margin 0.25s;
-o-transition: opacity 0.5s, margin 0.25s;
transition: opacity 0.5s, margin 0.25s;