23

I am wanting to animate two properties in Bootstrap v2.1.0,

The opacity and the 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.

Note that I am using lessphp so solutions that use the JavaScript regex will not work.

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?

4

1 に答える 1

63

2 つのオプション (LESS のバージョンによる)

少ない (1.3.3+)

less2css.orgは、これが実験的に LESS 1.3.2 で動作することを示していますが、問題のドキュメントは、これが1.4 リリースの追加であることを示しているようです。

それが有効になると、ある時点で、セミコロンがパラメトリック mixin の可能な変数セパレーターとして導入されましたが、コンマはまだ許可されていました。a が存在すると、カンマは変数を区切るものとしてではなく、変数自体の値の一部(カンマ区切りのリスト);と見なされます。これにより、（サイトを引用すると）「ダミーのセミコロンを使用して、カンマ区切りの css リストを含む 1 つの引数で 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;
于 2012-10-28T00:26:05.513 に答える