1

適切なエンジン プレフィックスを使用して CSS トランジションを自動化する LESS mixin を作成しました。

.Transition(@Property, @Timing){
    -moz-transition: @Property @Timing linear;
    -webkit-transition: @Property @Timing linear;
    -o-transition: @Property @Timing linear;
    transition: @Property @Timing linear;
}

残念ながら、アニメーション化するスタイルの選択グループを指定することはできません。特定の 1 つのスタイルまたは「すべて」のみを指定できます。同じ mixin を複数回使用してさらに多くのスタイルを mix に投入しようとすると、transition プロパティが上書きされてしまいます。例えば：

.class { .Transition(top, .2s); .Transition(opacity, .2s); .Transition(box-shadow, .2s); }

結果:

.class {
    -moz-transition: box-shadow, .2s;
    -webkit-transition: box-shadow, .2s;
    -o-transition: box-shadow, .2s;
    transition: box-shadow, .2s; 
}

1 つのスタイルに柔軟な量の値を適用できる mixin を作成するにはどうすればよいですか?

4

3 に答える 3

2

マージのサポート

LESS v1.5 では、プロパティの末尾に+

このmerge機能を使用すると、複数のプロパティの値を、1 つのプロパティの下にコンマまたはスペースで区切られたリストに集約できます。mergebackground や transform などのプロパティに役立ちます。

...

例：

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

出力:

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

セミコロンのサポート

LESS v1.4(?) では、セミコロンを使用した複数のパラメーターのサポートが導入されました。これにより、複数のパラメーターを必要とせずに、各パラメーターにリテラル コンマを含めることができます。

コンマを mixin セパレータとして使用すると、コンマ区切りのリストを引数として作成できなくなります。一方、コンパイラが mixin 呼び出しまたは宣言内に少なくとも 1 つのセミコロンを検出した場合、コンパイラは、引数がセミコロンで区切られ、すべてのコンマが css リストに属していると想定します。

  • 2 つの引数で、それぞれにカンマ区切りのリストが含まれます: .name(1, 2, 3; something, else),
  • 3 つの引数で、それぞれに 1 つの数値が含まれます: .name(1, 2, 3)、
  • ダミーのセミコロンを使用して、コンマ区切りの css リストを含む 1 つの引数を持つ mixin 呼び出しを作成します: .name(1, 2, 3;),
  • コンマ区切りのデフォルト値: .name(@param1: red, blue;).
例 
.transition(@args) {
    -webkit-transition: @args;
    -moz-transition: @args;
    -o-transition: @args;
    transition: @args;
}
.selector {
    .transition(.2s top, .2s opacity, .2s box-shadow;);
    //                            this is required -^
}

前セミコロンのサポート

コンマを使用して複数の引数をサポートすることは、主に less が からコンマを削除するため、最初に思われるよりも少し難しくなります@arguments。私はgithub で ZLESS プロジェクトを開始し、 LESS の操作を簡素化するために多くの mixin を追加しました。

これは、移行に使用するコードです(コンパイラ フラグなし)。

.transition(@a, @b: X, ...) {
    //http://stackoverflow.com/a/13490523/497418
    @args: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
    -webkit-transition: @args;
    -moz-transition: @args;
    -o-transition: @args;
    transition: @args;
}

次のように使用されます。

.selector {
    .transition(.2s top, .2s opacity, .2s box-shadow);
}
于 2013-03-07T16:41:45.493 に答える
1

トランジションの「プロパティ」を分離すれば、うまくいくと思います！

例えば ​​：

.transitionProperty ( @property1, @property2, @property3) {
   -moz-transition-property : @property1, @property2, @property3;
   -o-transition-property : @property1, @property2, @property3;
   -webkit-transition-property : @property1, @property2, @property3;
   transition-property : @property1, @property2, @property3;
}

またはそのようなもの。考える価値のある問題だと思います;）

于 2013-03-06T21:21:40.000 に答える
1

基本的に、エスケープ文字列として渡す必要があります。したがって、コードを変更します。

.Transition(@transString){
    -moz-transition: @transString;
    -webkit-transition: @transString;
    -o-transition: @transString;
    transition: @transString;
}

次に、次のように使用します。

.Transition(~"top .2s linear, opacity .2s linear, box-shadow .2s linear");

これが生成されます：

-moz-transition: top .2s linear, opacity .2s linear, box-shadow .2s linear;
-webkit-transition: top .2s linear, opacity .2s linear, box-shadow .2s linear;
-o-transition: top .2s linear, opacity .2s linear, box-shadow .2s linear;
transition: top .2s linear, opacity .2s linear, box-shadow .2s linear;
于 2013-03-07T16:33:14.833 に答える