フレキシブル (LESS 1.5.1+)
このソリューションはインライン JavaScript を使用せず、次のことを可能にします。
- 設定するデフォルト
- 渡されるプロパティ、期間、遅延などの任意の数
- 長い形式またはコンパクトな形式で出力
- 必要に応じて、パラメーターのグループを入力する代わりに生のリストを入力
プロパティの数が継続時間、遅延、またはタイミングの数より多い場合、compact出力が設定されている場合、継続時間/遅延/タイミングの最終値は、渡された数を超えるすべての追加プロパティのそのパラメーターの値になりますが、が設定されていない場合compactは、長い形式が出力され、ブラウザが CSS 標準を解釈するたびに値が複製されます。
LESS ミックスイン
.transition (@props: all;
@duration:1s;
@delay: 0s;
@timing: ease;
@compact: true;
@raw-input: false) {
.output() when (@raw-input = false) and not (@compact = true) {
-webkit-transition-property:@props;
-moz-transition-property:@props;
-ms-transition-property:@props;
-o-transition-property:@props;
transition-property:@props;
-webkit-transition-duration:@duration;
-moz-transition-duration:@duration;
-ms-transition-duration:@duration;
-o-transition-duration:@duration;
transition-duration:@duration;
-webkit-transition-delay: @delay;
-moz-transition-delay: @delay;
-ms-transition-delay: @delay;
-o-transition-delay: @delay;
transition-delay: @delay;
-webkit-transition-timing-function:@timing;
-moz-transition-timing-function:@timing;
-ms-transition-timing-function:@timing;
-o-transition-timing-function:@timing;
transition-timing-function:@timing;
}
.output() when (@raw-input = false) and (@compact = true) {
@propsLength: length(@props);
@durationLength: length(@duration);
@delayLength: length(@delay);
@timingLength: length(@timing);
.buildString(@i, @s: ~'') when (@i <= @propsLength) {
@prop: extract(@props, @i);
.setDuration() when (@i <= @durationLength) {
@dur: extract(@duration, @i);
}
.setDuration() when (@i > @durationLength) {
@dur: extract(@duration, @durationLength);
}
.setDuration();
.setDelay() when (@i <= @delayLength) {
@del: extract(@delay, @i);
}
.setDelay() when (@i > @delayLength) {
@del: extract(@delay, @delayLength);
}
.setDelay();
.setTiming() when (@i <= @timingLength) {
@time: extract(@timing, @i);
}
.setTiming() when (@i > @timingLength) {
@time: extract(@timing, @timingLength);
}
.setTiming();
.setDivider() when (@i > 1) {
@divider: ~'@{s},';
}
.setDivider() when (@i = 1) {
@divider: ~'';
}
.setDivider();
@string: @divider @prop @dur @del @time;
.buildString((@i + 1), @string);
}
.buildString(1);
.buildString(@i, @s: ~'') when (@i > @propsLength) {
.compact(@s);
}
}
.output() when not (@raw-input = false) {
.compact(@raw-input);
}
.compact(@string) {
-webkit-transition:@string;
-moz-transition:@string;
-ms-transition:@string;
-o-transition:@string;
transition:@string;
}
.output();
}
LESS 使用例
.test {
.transition();
}
.test-props {
.transition(width);
}
.test-duration {
.transition(@duration: 3s);
}
.test-delay {
.transition(@delay: 10s);
}
.test-timing {
.transition(@timing: linear);
}
.test-all {
.transition(height, 4s, 12s, ease-out);
}
.test-multitransitions {
.transition(width, height, top; 1s, 2s; 0s, 1s, 3s; ease-in, ease-out, ease);
}
.test-not-compact {
.transition(width, height, top; 1s, 2s; 0s, 1s, 3s; ease-in, ease-out, ease; false);
}
.test-raw-input {
.transition(@raw-input: top 1s, bottom 1s, color 3s 1s linear;);
}
上記の例では、特に次の 2 つの点に注意してください。(1) リストを区切るためにカンマを使用し、パラメータ グループを区切るためにセミコロンを使用して、複数の値を渡す必要がある方法。視覚化すると、次のようになります。
.transition(width, height, top; 1s, 2s; 0s, 1s, 3s; ease-in, ease-out, ease);
|---Properties----|-Dur.--|---Delay---|---------Timing--------|
| | |
semicolons divide groups of parameters
(2)raw-inputコンマをリスト アイテムと見なすために、この例では末尾のセミコロンが必要です。
.transition(@raw-input: top 1s, bottom 1s, color 3s 1s linear;);
|
semicolon here needed
例の CSS 出力
.test {
-webkit-transition: all 1s 0s ease;
-moz-transition: all 1s 0s ease;
-ms-transition: all 1s 0s ease;
-o-transition: all 1s 0s ease;
transition: all 1s 0s ease;
}
.test-props {
-webkit-transition: width 1s 0s ease;
-moz-transition: width 1s 0s ease;
-ms-transition: width 1s 0s ease;
-o-transition: width 1s 0s ease;
transition: width 1s 0s ease;
}
.test-duration {
-webkit-transition: all 3s 0s ease;
-moz-transition: all 3s 0s ease;
-ms-transition: all 3s 0s ease;
-o-transition: all 3s 0s ease;
transition: all 3s 0s ease;
}
.test-delay {
-webkit-transition: all 1s 10s ease;
-moz-transition: all 1s 10s ease;
-ms-transition: all 1s 10s ease;
-o-transition: all 1s 10s ease;
transition: all 1s 10s ease;
}
.test-timing {
-webkit-transition: all 1s 0s linear;
-moz-transition: all 1s 0s linear;
-ms-transition: all 1s 0s linear;
-o-transition: all 1s 0s linear;
transition: all 1s 0s linear;
}
.test-all {
-webkit-transition: height 4s 12s ease-out;
-moz-transition: height 4s 12s ease-out;
-ms-transition: height 4s 12s ease-out;
-o-transition: height 4s 12s ease-out;
transition: height 4s 12s ease-out;
}
.test-multitransitions {
-webkit-transition: width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
-moz-transition: width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
-ms-transition: width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
-o-transition: width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
transition: width 1s 0s ease-in, height 2s 1s ease-out, top 2s 3s ease;
}
.test-not-compact {
-webkit-transition-property: width, height, top;
-moz-transition-property: width, height, top;
-ms-transition-property: width, height, top;
-o-transition-property: width, height, top;
transition-property: width, height, top;
-webkit-transition-duration: 1s, 2s;
-moz-transition-duration: 1s, 2s;
-ms-transition-duration: 1s, 2s;
-o-transition-duration: 1s, 2s;
transition-duration: 1s, 2s;
-webkit-transition-delay: 0s, 1s, 3s;
-moz-transition-delay: 0s, 1s, 3s;
-ms-transition-delay: 0s, 1s, 3s;
-o-transition-delay: 0s, 1s, 3s;
transition-delay: 0s, 1s, 3s;
-webkit-transition-timing-function: ease-in, ease-out, ease;
-moz-transition-timing-function: ease-in, ease-out, ease;
-ms-transition-timing-function: ease-in, ease-out, ease;
-o-transition-timing-function: ease-in, ease-out, ease;
transition-timing-function: ease-in, ease-out, ease;
}
.test-raw-input {
-webkit-transition: top 1s, bottom 1s, color 3s 1s linear;
-moz-transition: top 1s, bottom 1s, color 3s 1s linear;
-ms-transition: top 1s, bottom 1s, color 3s 1s linear;
-o-transition: top 1s, bottom 1s, color 3s 1s linear;
transition: top 1s, bottom 1s, color 3s 1s linear;
}
長い形式がまったく望ましくない場合は、mixin コードを次のように縮小できます。
.transition (@props: all;
@duration:1s;
@delay: 0s;
@timing: ease;
@raw-input: false) {
.output() when (@raw-input = false) {
@propsLength: length(@props);
@durationLength: length(@duration);
@delayLength: length(@delay);
@timingLength: length(@timing);
.buildString(@i, @s: ~'') when (@i <= @propsLength) {
@prop: extract(@props, @i);
.setDuration() when (@i <= @durationLength) {
@dur: extract(@duration, @i);
}
.setDuration() when (@i > @durationLength) {
@dur: extract(@duration, @durationLength);
}
.setDuration();
.setDelay() when (@i <= @delayLength) {
@del: extract(@delay, @i);
}
.setDelay() when (@i > @delayLength) {
@del: extract(@delay, @delayLength);
}
.setDelay();
.setTiming() when (@i <= @timingLength) {
@time: extract(@timing, @i);
}
.setTiming() when (@i > @timingLength) {
@time: extract(@timing, @timingLength);
}
.setTiming();
.setDivider() when (@i > 1) {
@divider: ~'@{s},';
}
.setDivider() when (@i = 1) {
@divider: ~'';
}
.setDivider();
@string: @divider @prop @dur @del @time;
.buildString((@i + 1), @string);
}
.buildString(1);
.buildString(@i, @s: ~'') when (@i > @propsLength) {
.compact(@s);
}
}
.output() when not (@raw-input = false) {
.compact(@raw-input);
}
.compact(@string) {
-webkit-transition:@string;
-moz-transition:@string;
-ms-transition:@string;
-o-transition:@string;
transition:@string;
}
.output();
}