使用循环在DIV中创建仅CSS的顺序淡入淡出

Question

以下代码使用的是jQuery。是否可以使用循环创建一个仅CSS的版本。我见过显示DIV的例子，但每个DIV都是用时间延迟单独编码的。如果我添加额外的DIV，这样的代码将需要更新CSS。相反，如果可能的话，我想在CSS中使用某种循环。

$("#main-container div").each(function(i) {
$(this).delay(500 * i).fadeIn(1500);
});

.ig-element {
width: 200px;
height: 200px;
float: left;
border: 1px solid grey;
display: none;
margin: 10px;
padding: 10px;
text-align: center;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-container">
<div class="ig-element">a</div>
<div class="ig-element">b</div>
<div class="ig-element">c</div>
<div class="ig-element">d</div>
<div class="ig-element">e</div>
<div class="ig-element">f</div>
<div class="ig-element">g</div>
<div class="ig-element">h</div>
<div class="ig-element">i</div>
</div>

Answer 1

不能只使用纯CSS进行循环。但如果你使用像SASS这样的CSS预处理器，你可以这样做：

SASS

@for $i from 1 through 9 {
.#main-container:nth-child(#{$i}n) {
animation-delay: {$i * 0.5}s;
}
}

较少

.mixin-loop (@i) when (@i > 0) {
// Output the current counter
.main-container:nth-child(@{i}) {
animation-delay: {@i * 0.5}s;
} 
// The mixin calls itself, recursively
// until the "@i > 0" condition is no longer met
.mixin-loop(@i - 1);
}
// Call the mixin with a counter to start the loop
.mixin-loop(9);

您可以在这个链接上找到更多方法并了解更多信息。