如何使用 Animate.css 和 ViewportChecker 添加动画延迟？答案

【问题标题】：How to add an animation delay using Animate.css and ViewportChecker?如何使用 Animate.css 和 ViewportChecker 添加动画延迟？
【发布时间】：2016-08-26 14:58:40
【问题描述】：

我正在尝试使用 Daniel Eden 的 animate.css 版本 3.5.1 和 Dirk Groenen 的 jquery-viewport-checker 版本 1.8.7 为特定网页上的不同动画类元素添加“延迟”。

我尝试使用 setTimeout 之类的函数...

setTimeout(function () {
jQuery('.fadeinleft1').addClass("hidden").viewportChecker({
    classToAdd: 'visible animated fadeInLeft',
    offset: 100
   });
}, 500
);

但这显然也会影响隐藏类。我只需要延迟动画，因为它到达视口，我可以相应地延迟每个对象。一直在寻找，只是还没有找到答案。

【问题讨论】：

标签： jquery css animation viewport

【解决方案1】：

想想看，我一提出问题，我就找到了一个只涉及添加 css 的修复程序。不需要触摸javascript。使用 animate.css 和 viewport-checker 时实现延迟动画的非常快速和简单的方法。您可以通过添加一个使用“动画延迟”的 CSS 类来实现。

Javascript：

jQuery('.fadeinleft').addClass("hidden").viewportChecker({
    classToAdd: 'visible animated fadeInLeft',
    offset: 100
   });

根据需要创建以下动画延迟 css，并根据需要创建多少个，您可以在所有动画上全局使用它们：

.delay-1 {
animation-delay: .25s;
}
.delay-2 {
animation-delay: .5s;
}
.delay-3 {
animation-delay: .75s;
}
.delay-4 {
animation-delay: 1s;
}

那么您需要做的就是将类添加到动画元素中：

<div class="col-md-4 fadeinleft">
    <a href="#">
        <div class="box-border-wht">
                <p>Title 1</p>
                <img src="/images/image1.jpg">
        </div>
    </a>
</div>

<div class="col-md-4 fadeinleft delay-1">
    <a href="#">
        <div class="box-border-wht">
                <p>Title 2</p>
                <img src="/images/image2.jpg">
        </div>
    </a>
</div>

<div class="col-md-4 fadeinleft delay-2">
    <a href="#">
        <div class="box-border-wht">
                <p>Title 3</p>
                <img src="/images/image3.jpg">
        </div>
    </a>
</div>

就是这样！

【讨论】：

【解决方案2】：

我不太清楚你为什么使用viewportChecker()，或者任何javascript/jQuery。您发布的解决方案是使用 jQuery 将 hidden css 类添加到您的元素（自 Bootstrap 4 起为 hidden has been replaced by d-none），但这是不必要的，因为 animated 类会自动为您处理此问题。 Animate.css 的目标是提供高效、无缝的动画，而不需要多余的 javascript/jQuery 代码。

由于 Animate.css 使用 animation(-name) css 属性为元素设置动画，因此它尊重 animation-delay css 属性。即使您完全删除了 jQuery 代码（如上所述），您的解决方案也应该可以工作。

【讨论】：