.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);
}
正如你所看到的,它开始相当于很多代码......
有没有人有任何想法如何使这更通用?对于三,四,五等转换属性,使用相同的函数?