Переходы перестают работать с fullpage.js
Я добавил fullpage.js в свой проект, и мои переходы css перестали работать.
Я проанализировал код с помощью инспектора кода, чтобы увидеть, были ли удалены классы или перезаписаны ли переходы, но я ничего не могу найти. Похоже, у меня тоже нет проблем с именами для моих классов.
Мои переходы просты. У меня есть класс, как
.element {
opacity: 0;
transition: opacity .5s ease-in;
}
.element-animated {
opacity: 1;
}
Затем немного jQuery, чтобы активировать анимацию при загрузке:
$(document).ready(function(){
$('.element').addClass('element-animated');
});
При добавлении $('#fullpage').fullpage(); в мой код мои переходы перестают работать. Когда я его удаляю, они снова работают.
Моя архитектура выглядит так:
<div id = "fullpage">
<div class = "section">
<div class = "element"></div>
</div>
<div class = "section2">
<div class = "element2"></div>
</div>
</div>
Ответы 1
Если вы читали часто задаваемые вопросы о fullpage.js, вам рекомендуется запускать эти действия в обратном вызове afterRender:
Short answer: if you are using options such as
verticalCentered:trueoroverflowScroll:truein fullPage.js initialization, or even horizontal slides, then you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in theafterRendercallback of fullpage.js
new fullpage('#fullpage', {
afterRender: function(){
$('.element').addClass('element-animated');
}
});