Переходы перестают работать с fullpage.js - PullRequest
Новая
       19

Переходы перестают работать с fullpage.js

0 голосов
/ 05 мая 2019

Я добавил 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 Ответ

0 голосов
/ 06 мая 2019

Если вы прочитаете fullpage.js faqs вам, то рекомендуется выполнить эти действия для обратного вызова afterRender:

Краткий ответ: если вы используете такие опции, как verticalCentered:true или overflowScroll:true при инициализации fullPage.js или даже горизонтальные слайды, то вам придется рассматривать ваши селекторы как динамические элементы и использовать делегирование.(используя такие вещи, как вкл из jQuery).Другой вариант - добавить свой код в afterRender обратный вызов fullpage.js 

new fullpage('#fullpage', {
    afterRender: function(){
       $('.element').addClass('element-animated');
    }
});
...