twitter-bootstrap Twitter bootstrap .transition 的多重转换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13065310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple transitions for Twitter bootstrap .transition?
提问by Hailwood
I am wanting to animate two properties in Bootstrap v2.1.0,
我想在 Bootstrap v2.1.0 中为两个属性设置动画，
The opacityand the margin.
的opacity和margin。
I have tried:
我努力了：
.transition(opacity 0.5s, margin 0.25s);: No output.transition('opacity 0.5s, margin 0.25s');: Invalid CSS output.transition(opacity 0.5s); .transition(margin 0.25s);: Margin overrides opacity.
.transition(opacity 0.5s, margin 0.25s);：无输出.transition('opacity 0.5s, margin 0.25s');：无效的 CSS 输出.transition(opacity 0.5s); .transition(margin 0.25s);：边距覆盖不透明度。
Note that I am using lessphpso solutions that use the JavaScript regex will not work.
请注意，我使用的是lessphp，因此使用 JavaScript 正则表达式的解决方案将不起作用。
I know I could copy the mixin and modify it to accept two parameters as well, but that just seems hacky, surely there is a better way?
我知道我可以复制 mixin 并修改它以接受两个参数，但这看起来很笨拙，肯定有更好的方法吗？
回答by ScottS
Two Options (Depending on version of LESS)
两个选项（取决于 LESS 的版本）
LESS (1.3.3+)
少 (1.3.3+)
The less2css.orgshows this works with LESS 1.3.2 on experimentation, but the issue documentationseems to indicate this is a 1.4 release addition.
该less2css.org显示了这个作品用更少的1.3.2上的实验，但是问题的文件似乎表明这是一个1.4版本增加。
Whenever it became effective, at some point, the semicolon was introduced as a possible variable separator in parametric mixins while still allowing commas. The presence of a ;causes commas to be viewed notas separating variables, but rather as part of the valueof the variable itself (a comma separated list). This then allows (to quote the site) us to use a "dummy semicolon to create mixin call with one argument containing comma separated css list."
每当它生效时，在某些时候，分号被引入作为参数混合中可能的变量分隔符，同时仍然允许逗号。一个的存在;原因逗号来看待并不为分离变量，而是作为所述一部分值变量本身（逗号分隔的列表）的。然后，这允许（引用该站点）我们使用“虚拟分号来创建带有一个包含逗号分隔的 css 列表的参数的 mixin 调用”。
Therefore the following works to produce the same output as above without the escaped string(NOTEthe "dummy" semicolon put at the end of the variable entry, right beforethe closing parenthesis of the parametric mixin call):
因此，以下工作可以在没有转义字符串的情况下产生与上述相同的输出（注意“虚拟”分号放在变量条目的末尾，就在参数混合调用的右括号之前）：
.transition(opacity 0.5s, margin 0.25s;);
|
semicolon here
LESS (pre 1.3.3, but also works in later versions)
LESS（1.3.3 之前的版本，但也适用于更高版本）
Do a string interpolation (~) for the passed in variables:
~对传入的变量进行字符串插值 ( )：
.transition(~"opacity 0.5s, margin 0.25s");
Both solutions output:
两种解决方案输出：
-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;
