如何使用 animate.css 和 viewportchecker 与 bootstrap

Question

我在网站中使用 bootstrap，但无法使用 animate.css 和 viewportchecker 创建这样的动画 http://www.web2feel.com/freeby/scroll-effects/index4.html 因为所有元素在添加 [= 后永久消失26=] 像这样隐藏

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

这是包含 bootstrap css 和 js 文件的同一页面 http://goo.gl/AipVzD 你可以看到什么都没有显示

我尝试将隐藏的 class 应用于多个元素，但我得到了相同的结果。动画在没有 bootstrap 和相同元素

的情况下正常工作

Answer 1

Bootstraps 隐藏 class 是：

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

所以它当然隐藏了一切。但是animate.css里面没有"hidden"class。我不确定你为什么需要它，但如果你需要隐藏一些东西，为什么不自己制作 class 呢？

附录

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

将此用于您的 CSS（已编辑）

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

这是你的 js（已编辑）：

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

how to use animate.css and viewportchecker with bootstrap