代码之家 › 专栏 › 技术社区 › meds

用更少的循环优化CSS?

less typescript reactjs css

meds · 技术社区 · 6 年前

我试图通过为每次迭代延迟动画几秒钟来找出应用级联样式效果的对象:

.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>;
}

显然,这是低效的,需要大量的复制+粘贴,有没有一种方法可以让我添加尽可能多的voteoptions和更少的可以写出css,它将迭代所有子组件,并应用正确的偏移开始时间?

1 回复 | 直到 6 年前

Dat Tran 6 年前

您可以使用循环来实现它:

.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();
  }
  .kid@{counter}.seleted {
    width: (10px * @counter); // code for each iteration  
  }
}

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