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

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时,可以非常快速简便地实现延迟动画.你可以通过添加一个使用"动画延迟"的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>

这就对了!