灵活（LESS 1.5.1+）
此解决方案不使用任何内联 javascript，它允许：
- 要设置的默认值
- 要传递的任意数量的属性、持续时间、延迟等
- 以长格式或紧凑格式输出
- 如果需要，可以输入原始列表而不是输入参数组
如果属性的数量大于持续时间、延迟或计时的数量，则如果设置了 compact 输出，则持续时间/延迟/计时的最终值将成为所有附加属性的该参数的值超出传递的数字，但如果compact 未设置，则输出长格式并输出values are duplicated per browsers interpret ion of the css standards。
LESS Mixin
.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;);
}
在上面的例子中，需要特别注意两点：（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();
}