如何让一个函数处理多个转换?

时间:2016-04-07 13:15:20

标签: css less

.transition (@prop: all,
@time: 1s,
@ease: linear,
@delay: 0s) {
    -webkit-transition: @prop @time @ease @delay;
    -moz-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}
.my-class-one {
    // stuff...
    .transition(bottom, 0.5s, ease-in, 0s);
}

.transition-two (@prop-one: all,
@time-one: 1s,
@ease-one: linear,
@delay-one: 0s,
@prop-two: all,
@time-two: 1s,
@ease-two: linear,
@delay-two: 0s) {
    -webkit-transition: @prop-one @time-one @ease-one @delay-one, @prop-two @time-two @ease-two @delay-two;
    -moz-transition: @prop-one @time-one @ease-one @delay-one, @prop-two @time-two @ease-two @delay-two;
    -o-transition: @prop-one @time-one @ease-one @delay-one, @prop-two @time-two @ease-two @delay-two;
    -ms-transition: @prop-one @time-one @ease-one @delay-one, @prop-two @time-two @ease-two @delay-two;
    transition: @prop-one @time-one @ease-one @delay-one, @prop-two @time-two @ease-two @delay-two;
}
.my-class-two {
    // stuff...
    .transition-two(bottom, 0.5s, ease-in, 0s, right, 0.5s, ease-in, 0s);
}

正如你所看到的,它开始相当于很多代码......

有没有人有任何想法如何使这更通用?对于三,四,五等转换属性,使用相同的函数?

0 个答案:

没有答案