Проблема с переходами раздела с использованием Velocity.js и JQuery ~ Glitching Animation - PullRequest
Новая
       21

Проблема с переходами раздела с использованием Velocity.js и JQuery ~ Glitching Animation

0 голосов
/ 19 мая 2018

Алоха!

У меня проблема с производительностью страниц при переходах speed.js.

JSFiddle - Щелкните в любом месте контейнера, чтобы изменить экраны.

Все работает идеально плавно, переходя к следующему экрану, а также перемещаясь назад с помощью кнопки «назад». Однако, после того, как я переместился назад и попытался снова продвинуться вперед, у меня возникла ошибка в анимации.

Вот jquery, который я использую: 

$('.next').click(function() {
$(this).parent().fadeOut(1000).nextAll().slice(0, 2).fadeIn(1000); //hide parent (section) and show the next one
$(this).prevAll().velocity('transition.slideDownOut', {
    stagger: 250
}); //stagger transition out all of .next's previous siblings
$(this).parent().next().children().velocity({
    delay: 750
}).velocity('transition.slideDownIn', {
    stagger: 250,
    backwards: true
}); //stagger transition in all of the next section's children after a delay });

Вы также можете увидеть скрипт кнопки «Назад» на jsfiddle.

.elmt установлен на opacity: 0, чтобы убедиться, что они изначально скрыты.

Вторые два экрана, div-3 и div-4 изначально установлены на display:none, поэтому им не нужно загружаться при посадке на страницу в div-1.

Кто-нибудь может увидеть, что может быть причиной проблемы?

Спасибо, и счастливых выходных!

1 Ответ

0 голосов
/ 19 мая 2018

Просто удалите: 

backwards: true

Прочитайте об этих свойствах Документы , и здесь у вас есть пример того, что делают задом наперед: Codepen .

...