Как повесить анимацию animate.css на смену слайда?

Question

[Александр]

Имеется несколько слайдов, которые листаются с помощью One Page Scroll https://github.com/peachananr/onepage-scroll
Для анимации использую Animate css, у каждого элемента на странице своя анимация и она разная, элементов на странице достаточно порядка 5-7, на примере jsfiddle.net/33WJx/668 1-2

Как запустить анимацию при смене слайда? Не пойму логику.... Подскажите пожалуйста как правильно сделать

Comments

[Алексей]

При смене слайда ему вешается класс active. При добавлении данного класса можно добавить анимацию.

[Алексей]

jsfiddle.net/1u6dL70j

[Александр]

Алексей: это понятно, но ниже в комментарии я написал что имеется 2 эффекта появления элемента и его исчезновение, использую я animate css. Может что не пониманию

Answer 1

[Александр]

Дело в том что еще 2 анимации на появление элемента и на исчезновение его

Answer 2

[Сергей Тутуков]

с помощью

$.fn.transformPage = function(settings, pos, index) { ... }

происходит анимация перелистывания.

Редактируй эту функцию, внутри нее активируй свою анимацию.

Comments

[Александр]

там есть такой параметр beforeMove: function(index) {}

но я пока не разобрался когда нужно менять fadeInLeft на fadeOutLeft.

Сейчас когда слайд становится активным у меня fadeInLeft происходит, а когда слайд меняется контент не исчезает как fadeOutLeft а просто статика и все. В этом беда

[Александр]

Даже через css делаю вот так :

section {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
section.active .fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}

fadeInLeft срабатывает когда класс актив удаляется обратный эффект не происходит

[Сергей Тутуков]

codepen.io/STutukov/pen/zKJyqB

[Александр]

Сергей Тутуков: не то это