12

次のLESS mixinを使用して、.25sの次のプロパティを線形に簡単に移行する方法を誰かが示すことができますか?

border-top: 6px ソリッド #ff3300;

.transition-properties(...) {
@props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
-webkit-transition-property: @props;
-moz-transition-property: @props;
-o-transition-property: @props;
transition-property: @props;
}
4

1 に答える 1

32

更新：1.4以上の機能

LESS 1.4では、コンマ区切りの引数の元の回答で使用されているJavaScriptは必要ありません。代わりに、引数文字列の最後に「ダミー」のセミコロンを使用すると、コンマは引数の区切り文字ではなくリストの区切り文字として表示されるため、複数の遷移を代入するときにこれが機能するようになりました。

少ない1.4+

ミックスイン呼び出し（）のセミコロン.transition-properties(border-top .25s linear, color .5s linear;);は非常に重要です。省略した場合、2つのパラメーター間のコンマが削除され、無効なcssルールになります。

.transition-properties(...) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}


.yourClass {
  border-top: 1px solid black;
  .transition-properties(border-top .25s linear, color .5s linear;); /* semicolon is necessary */
}                                                                |
                                                          NOTE THIS SEMICOLON

.yourClass:hover {
  border-top: 6px solid #ff3300;
}

CSS出力

2つのプロパティ値の間にコンマが残っていることに注意してください。

.yourClass {
  border-top: 1px solid black;
  -webkit-transition: border-top 0.25s linear, color 0.5s linear;
  -moz-transition: border-top 0.25s linear, color 0.5s linear;
  -o-transition: border-top 0.25s linear, color 0.5s linear;
  transition: border-top 0.25s linear, color 0.5s linear;
}
.yourClass:hover {
  border-top: 6px solid #ff3300;
}

元の回答[PreLESS1.4]

明らかに、詳細は正確な実装によって異なります。ただし、これは一般的にどのように使用するかを示しています。

以下

.transition-properties(...) {
@props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
-webkit-transition: @props;
-moz-transition: @props;
-o-transition: @props;
transition: @props;
}


.yourClass {
  border-top: 1px solid black;
  .transition-properties(border-top .25s linear);
}

.yourClass:hover {
  border-top: 6px solid #ff3300;
}

CSS出力

.yourClass {
  border-top: 1px solid black;
  -webkit-transition: border-top 0.25s linear;
  -moz-transition: border-top 0.25s linear;
  -o-transition: border-top 0.25s linear;
  transition: border-top 0.25s linear;
}
.yourClass:hover {
  border-top: 6px solid #ff3300;
}

フィドルの例を参照してください

説明

何

@props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;

実行できるようにするために、複数のコンマ区切りの遷移を入れます。たとえば、次のようになります。

.transition-properties(border-top .25s linear, color 1s linear);

これは、コンマで区切られた状態を維持するためにコンパイルされます（たとえば、1行だけが表示されます）。

transition: border-top 0.25s linear, color 1s linear;

ストレート@argumentsを使用した場合は、コンマ区切りがなくなります。

transition: border-top 0.25s linear color 1s linear;

これはプロパティに対して正しくありません。

于 2013-02-20T19:40:29.270 に答える