将参数传递给@keyframes
不能直接用Less完成。然而我们可以把整个包裹起来@keyframes
父 mixin 中的规则,将参数传递给该 mixin 并在框架内使用它。
.loader(@transform){ /* wrapper mixin which accepts input parameter */
@keyframes loader {
0% { transform: @transform rotate(0deg); }
100% { transform: @transform rotate(360deg); }
}
}
.loader(translate(0, -50%)); /* mixin call */
(柯特最初提供了答案,但出于我未知的原因删除了它。)
如果您感兴趣,通用关键帧混合也可以用 Less 编写,如下所示。
样本1:
.generickeyframe(@name; @from; @to){ /* takes name, from frame rules, to frame rules */
@keyframes @name{
0% { @from();}
100% { @to();}
}
}
.generickeyframe(loader; {transform: translate(0,-50%) rotate(0deg)};
{transform: translate(0,-50%) rotate(360deg)});
样本2:
.keyframefromto(@name; @from; @to){
@keyframes @name{
0% { transform: @from;}
100% { transform: @to;}
}
}
.keyframefromto(loader; translate(0,-50%) rotate(0deg); translate(0,-50%) rotate(360deg));
如果需要在@keyframes
规则,我们可以使用数组列表和循环,如下面的代码片段所示。这个 mixin 将动画的名称、帧列表(它们的百分比数)和每个帧的属性(以规则集的形式)作为参数。
.generickeyframe(@name; @framelist; @frameprops){
@keyframes @name{
.loop-framelist(@index) when (@index <= length(@framelist)){
@framepos: extract(@framelist, @index) * 1%;
@{framepos}{
@props: extract(@frameprops, @index);
@props();
}
.loop-framelist(@index + 1);
}
.loop-framelist(1);
}
}
.generickeyframe(loader;
0,25,50,75,100;
{transform: translateX(10px);},
{transform: translateX(20px);},
{transform: translateX(50px);},
{transform: translateX(20px);},
{transform: translateX(10px);}
);
编译后的CSS:
@keyframes loader {
0% {transform: translateX(10px);}
25% {transform: translateX(20px);}
50% {transform: translateX(50px);}
75% {transform: translateX(20px);}
100% {transform: translateX(10px);}
}