循环操作非常有用的方法,我用动画库时,发现没有动画延迟的css,但是呢?如果动画需要顺序执行的话,又需要和动画执行速度有关,基于这个应用场景:
@speed:0.8s;//这个是动画的执行时间
.loop(@n) when (@n > 0) {
.animated.delay@{n}{
animation-delay:(@n*@speed) ;
}
//循环调用自身
.loop((@n - 1));
}
.loop(5) ;
编译之后
.animated.delay5 {
animation-delay: 4s;
}
.animated.delay4 {
animation-delay: 3.2s;
}
.animated.delay3 {
animation-delay: 2.4s;
}
.animated.delay2 {
animation-delay: 1.6s;
}
.animated.delay1 {
animation-delay: 0.8s;
}
举一反三:有了循环 less写的飞起