如何使用animate.css和viewportchecker与bootstrap

Question

我在网站上使用bootstrap但是不能使用animate.css和viewportchecker来创建像http://www.web2feel.com/freeby/scroll-effects/index4.html这样的动画，因为在添加隐藏的类之后所有元素都会永久消失

jQuery('.row.homeCats').addClass("hide").viewportChecker({
    classToAdd: 'visible animated fadeInDown',
    offset: 100
});

这是包含bootstrap css和js文件的同一页面http://goo.gl/AipVzD你可以看到任何内容

我尝试将隐藏类应用于多个元素，但我得到了相同的结果。动画正常工作，没有带有相同元素的引导程序

Answer 1

Bootstraps隐藏类是：

.hidden {
 display: none !important;
visibility: hidden !important;
}

当然，它隐藏了一切。 但是animate.css中没有“隐藏”类。我不知道为什么你需要它，但如果你需要隐藏某些东西，为什么不自己上课呢？

<强>附录

由于你的问题实际上是关于viewportchecker而不是animate.css，这里有一个解决方案：

将此用于CSS（已编辑）

 .hideme{
 opacity:0;
 }
 .visible{
 opacity:1;
 }

这是你的js（已编辑）：

jQuery('.row.homeCats').addClass("hideme").viewportChecker({
classToAdd: 'visible animated fadeInDown',
offset: 100
});