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版本增加.

每当它变得有效时,在某些时候,分号被引入作为参数mixins中可能的变量分隔符,同时仍然允许使用逗号.一个的存在;原因逗号来看待并不为分离变量,而是作为所述一部分值变量本身的(逗号分隔列表).然后,这允许(引用网站)我们使用"虚拟分号来创建mixin调用,其中一个参数包含逗号分隔的css列表."

因此,下面的工作是产生与上面相同的输出而没有转义字符串(注意在参数mixin调用的右括号之前放置在变量条目末尾的"虚拟"分号):

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

较少(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;