Question

Happy Eastern，

我正在使用Javascript和Jake Weary填充并在我的页面上显示无序列表。首先是一个for循环，用于将内容推送到数组中，然后：

var join = array.join("");
$("#list_view").html("<ul>"+join+"</ul>");
$("#list_view").show();
$("#list_view > ul > li").addClass("list_flip");

list_view div最初是隐藏的，list_flip类包含CSS关键帧动画。

.list_flip {
animation: flip 1s linear;
}
@keyframes flip {
0% {transform: rotateX(180deg);}
100% {transform: rotateX(0deg);}
}

这种方法效果很好，但我想在每次“翻转”而不是一次性翻译之间有一点延迟。

每次列表长度可能不同，所以我无法直接在CSS中查找列表项。

感谢任何帮助。

Answer 1

你想循环遍历所有列表项并使用它们的索引作为延迟的变量：

$("#list_view > ul > li").each(function(idx,value){
    $(this).addClass("list_flip");
    $(this).css({
        "-webkit-animation-delay":idx+"s",
        "-moz-animation-delay":idx+"s",
        "-ms-animation-delay":idx+"s",
        "-o-animation-delay":idx+"s",
        "animation-delay":idx+"s"
    });
});

这是一个例子：Fiddle

每个列表项的关键帧动画延迟？

1 个答案: