将动画顺序添加到 animate.css

Question

我想在使用 animate.css 时在每个动画之间添加延迟，以便它们按顺序播放。例如，northernlighting.no（菜单项）。

问题是我不知道如何为每个元素设置动画而不是为整个列表设置动画。

Answer 1

jQuery可以做到。

确保你有一个 "hidden" class 分配给你正在制作动画的任何东西。

.hidden {
    display: none;
}

你的HTML会是这样

<ul>
    <li id="content1" class="hidden">
    <li id="content2" class="hidden">
    <li id="content3" class="hidden">
</ul>

jQuery会这样

$(document).ready(function () {
    $("#content1").removeClass("hidden");
    $("#content1").addClass("animated fadeIn");
    $("#content2").delay("slow").removeClass("hidden");
    $("#content2").addClass("animated fadeIn");
    $("#content3").delay("slow").removeClass("hidden");
    $("#content3").addClass("animated fadeIn");
});

将动画顺序添加到 animate.css

Add animation order to animate.css

html

css

jquery

animation

animate.css