web-dev-qa-db-ja.com

Twitterの複数の遷移bootstrap .transition？

Bootstrap v2.1.0、で2つのプロパティをアニメーション化したいと思います。

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正規表現を使用するソリューションは機能しないことに注意してください。

ミックスインをコピーして、2つのパラメーターも受け入れるように変更できることは知っていますが、それはハックのように思えます。確かにもっと良い方法がありますか？

csstwitter-bootstraplesscss-transitions
23
Hailwood

2つのオプション（LESSのバージョンによって異なります）

LESS（1.3.3 +）

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

それが効果的になるときはいつでも、ある時点で、セミコロンは、コンマを許可しながら、パラメトリックミックスインの可能な変数区切り文字として導入されました。 ;が存在すると、コンマは変数分離として表示されますnotではなく、変数自体のvalueの一部として表示されます（コンマ分離リスト） 。これにより、（ サイトを引用 ）「ダミーのセミコロンを使用して、コンマで区切られたcssリストを含む1つの引数を持つミックスイン呼び出しを作成する」ことができます。

したがって、以下は上記と同じ出力を生成するように機能しますエスケープされた文字列なし（ [〜＃〜]注[〜＃〜]変数エントリの最後に配置された「ダミー」セミコロン、右前パラメトリックミックスインの閉じ括弧コール）：

.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;
63
ScottS