如何在 bootstrap 中使用 animate.css 和 viewportchecker

Question

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

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

这是包含引导 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
});