css – Twitter引导的多个转换.transition?

前端之家收集整理的这篇文章主要介绍了css – Twitter引导的多个转换.transition?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在Bootstrap v2.1.0中为两个属性设置动画,

不透明度和余量。

我努力了:

.transition(opacity 0.5s,margin 0.25s);:没有输出
.transition(‘opacity 0.5s,margin 0.25s’);:无效的CSS输出
过渡(不透明度0.5s); .transition(margin 0.25s);:保证金覆盖不透明度。

请注意,我正在使用lessphp,因此使用JavaScript正则表达式的解决方案将无法正常工作。

我知道我可以复制mixin并修改它来接受两个参数,但是这似乎是黑客,肯定有更好的方法

解决方法

两个选项(根据LESS的版本)

LESS(1.3.3)

less2css.org显示这与LESS 1.3.2有关的实验,但issue documentation似乎表明这是a 1.4 release addition

每当它变得有效时,在某些时候,分号被引入参数混合中的可能的变量分隔符,同时还允许使用逗号。一个导致逗号不被视为分离变量,而是作为变量本身的值的一部分(逗号分隔列表)。这样就允许(到quote the site)我们使用一个“分号”来创建一个包含逗号分隔的css列表的一个参数的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;

猜你在找的CSS相关文章