无限元素的CSS顺序动画级联
无限元素的CSS顺序动画级联
提问于 2014-08-29 22:41:46
据我所知，获得级联动画的通常方法是：
.box {
animation: someAnimation 3s linear 0s 1 normal none;
}然后，如果我想实现级联(顺序)效果：
.box:nth-child(1) {
animation-delay: 0s;
}
.box:nth-child(2) {
animation-delay: 0.5s;
}
.box:nth-child(3) {
animation-delay: 1s;
}
etc...通常，这可以通过一个输入N个元素的混合器自动生成。
问题是：如何在CSS中实现无限数量的元素?换句话说，如何在不为每个子元素指定延迟的情况下制作级联动画？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-04 20:58:12
实际上，你总是有有限的元素。真正的问题是你不知道你会有多少盒子。
无论您有一个静态或动态数量的框，您应该(我认为您已经有)通过编程创建它们，如果数量是足够的。您可以使用PHP、javascript或许多其他框架。在以编程方式创建框后，只需使用样式属性在创建元素时指定延迟。
伪码：
for(n = 0; n < numBox; ++n){
echo "<div class = 'box' style = 'animation-delay: " + 0.5*n + "'>stuff</div>";
}Stack Overflow用户
发布于 2014-09-04 18:39:52
您可以使用Sass的数学属性：
小提琴在这里
通过变量指定nth-child，并在确定延迟时使用该变量。
@for $i from 1 through $total {
.box:nth-child(#{$i}){
-webkit-animation-delay: $i * 0.5s;
animation-delay: $i * 0.5s - 0.5s;
}
}其中$total是由子级的数量定义的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25577170
复制相关文章
相似问题
腾讯云开发者
