Twitter bootstrap .transition 的多个转换？

Posted 2023-03-06

【中文标题】Twitter bootstrap .transition 的多个转换？

【英文标题】：Multiple transitions for Twitter bootstrap .transition?

【发布时间】：2012-10-15 10:38:09

【问题描述】：

我想在 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 并对其进行修改以接受两个参数，但这似乎很老套，肯定有更好的方法吗？

【参考方案1】：

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

少 (1.3.3+)

less2css.org 显示这适用于 LESS 1.3.2 的实验，但issue documentation 似乎表明这是a 1.4 release addition。

每当它生效时，在某个时候，分号被引入作为参数混合中可能的变量分隔符，同时仍然允许逗号。 ; 的存在导致逗号不被视为分隔变量，而是作为变量本身的值的一部分（逗号分隔列表）。然后，这允许（到quote the site）我们使用“虚拟分号创建带有一个包含逗号分隔的 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;