用更少的循环优化css？

Posted 2023-02-22

【中文标题】用更少的循环优化css？

【英文标题】：Optimize css with less loop?

【发布时间】：2019-01-05 16:23:09

【问题描述】：

我试图通过在每次迭代中将动画延迟几秒钟来确定谁应用级联样式效果：

.stashCard 
    background-color:white;


.in(@delay) 
    -webkit-animation: swing-in-left-bck .6s cubic-bezier(.175, .885, .32, 1.275) @delay both;
    animation: swing-in-left-bck .6s cubic-bezier(.175, .885, .32, 1.275) @delay both


.out(@delay) 
    -webkit-animation: fade-out .2s ease-out @delay both;
    animation: fade-out .2s ease-out @delay both


.baseKid 
    width: 50px;
    height: 50px;
    display: inline-block;



.selected

    .kid();
    color:yellow;


.kid 
    .out(0s);
    .baseKid();

.stashCard:hover .kid 
    .in(0s);
    .baseKid();


.stashCard:hover .kid.selected 
    .in(0s);
    .baseKid();

.stashCard:hover .kid2.selected 
    .in(0.05s);
    .baseKid();


.stashCard:hover .kid2 
    .in(0.05s);
    .baseKid();


.stashCard:hover .kid3.selected 
    .in(0.1s);
    .baseKid();


.stashCard:hover .kid3 
    .in(0.1s);
    .baseKid();


.hover 
    -webkit-animation: text-shadow-drop-center .6s both;
    animation: text-shadow-drop-center .6s both

.unhover 
    -webkit-animation: untext-shadow-drop-center .6s both;
    animation: untext-shadow-drop-center .6s both

这就是我的应用方式：

export const PopupMenu = (props: InputProps) => 
    return <div className="menu" style=props.style>
        <VoteOption count="actors" className=props.selectedCounts.indexOf("actors") >= 0 ? "selected kid" : "kid"  onClick=props.onClick icon="sentiment_very_satisfied" tip="Real actors" />
        <VoteOption count="audio" className=props.selectedCounts.indexOf("audio") >= 0 ? "selected kid2" : "kid2" onClick=props.onClick icon="music_video" tip="Great audio quality" />
        <VoteOption count="picture" className=props.selectedCounts.indexOf("picture") >= 0 ? "selected kid3" : "kid3" onClick=props.onClick icon="photo_camera" tip="Great picture quality" />
    </div>;

显然这是低效的并且需要大量的复制和粘贴，有没有一种方法可以让我可以添加任意数量的投票选项，而更少的可以写出 css，它将遍历所有子组件并应用有正确的偏移开始时间吗？

【参考方案1】：

你可以使用循环来实现它：

.in(@delay) 
    -webkit-animation: swing-in-left-bck .6s cubic-bezier(.175, .885, .32, 1.275) @delay both;
    animation: swing-in-left-bck .6s cubic-bezier(.175, .885, .32, 1.275) @delay both


.out(@delay) 
    -webkit-animation: fade-out .2s ease-out @delay both;
    animation: fade-out .2s ease-out @delay both


.baseKid 
    width: 50px;
    height: 50px;
    display: inline-block;



.loop(@counter) when (@counter > 0) 
  .loop((@counter - 1));    // next iteration
  .kid@counter 
    .in(0.05s * (@counter - 1));
    .baseKid();
  
  [e-mail] 
    width: (10px * @counter); // code for each iteration  
  


.stashCard:hover 
  .loop(5); // launch the loop