Question

我正在尝试使用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
);

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

Answer 1

去图，我一问一个问题，就找到一个只涉及添加css的修复程序。不需要触摸javascript。使用animate.css和viewport-checker时，可以非常快速轻松地实现延迟动画。你可以通过添加一个使用＆＃34; animation-delay。＆＃34;

的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>

就是这样！

Answer 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代码（如上所述），您的解决方案也应该可以工作。

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

2 个答案: