Как использовать 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 
}); 

это та же страница с начальной загрузки CSS и JS файлов, включенных http://goo.gl/AipVzD вы можете seenothing показывает вверх на всех

Я пытался применять скрытый класс к нескольким элементам, но я получаю тот же результат. Анимация работает нормально без начальной загрузки с теми же элементами

Answer 1

бутстрапирования скрытый класс:

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

Так, конечно, она скрывает все. Но нет никакого «скрытого» класса в animate.css. Я не уверен, зачем вам это нужно, но почему бы не создать свой собственный класс, если вам нужно что-то скрывать?

ADDENDUM

Поскольку ваш вопрос на самом деле о viewportchecker не animate.css, вот решение:

Используйте это для CSS (под редакцией)

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

и это для ваш js (отредактированный):

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