Как я могу удалить класс * после * анимации временной шкалы GSAP? - PullRequest
Новая
       90

Как я могу удалить класс * после * анимации временной шкалы GSAP?

2 голосов
/ 06 января 2020

Я создал простую анимацию временной шкалы GSAP, чтобы скользить полноэкранный div по всему окну просмотра.

Поскольку на странице, по которой она будет скользить, имеется прокручиваемый контент, я установил видимость скрыта, и оттолкнула ее от страницы. Когда я щелкаю по выбранной навигационной ссылке, добавляется класс «active» и анимация срабатывает.

По какой-то причине, когда я обращаюсь к нему, он немедленно удаляет класс, даже если я добавляю что-то вроде этого: 

$(closeAbout).on('click', "#close", function () {
            timeline.reversed() ? timeline.play() : timeline.reverse();
            $("#teambio").removeClass('active');
        });

Я включил весь код временной шкалы ниже, на случай, если это кому-нибудь пригодится: 

var closeAbout = $('#close');
var openAbout = $('#about');
var main = $('main');

var timeline = new TimelineMax({
    paused: true,
    reversed: true
});

timeline
    .to( "main", 0.3, {
        opacity: 0,
    }, 0)
    .to(".about", 1, {
        y: "0%",
        ease: Power4.easeInOut
    })
    .to(".blurb", 1, {
        y: "0%",
        opacity: 1,
        ease: Power4.easeInOut,
        delay: 0.5
    }, 0)
    .to("#close", 0.5, {
        opacity: 1,
        ease: Power4.easeInOut,
        delay: 0.8,
    }, 0);

$(openAbout).on('click', "#about", function () {
    $("#teambio").addClass('active');
    timeline.reversed() ? timeline.play() : timeline.reverse();
});

$(closeAbout).on('click', "#close", function () {
        timeline.reversed() ? timeline.play() : timeline.reverse();
        $("#teambio").removeClass('active');
    });

Все, что я хочу - это удалить класс ПОСЛЕ временная шкала заканчивается, и по какой-то причине все, что я пробовал, не работает.

Кроме того, я знаю, что, возможно, я мог бы структурировать и назвать все это лучше, чем здесь, но я оба новичок в GSAP, а также просто пытаюсь заставить это работать.

Буду признателен за любую помощь и терпение.

1 Ответ

1 голос
/ 06 января 2020

Примерно так: 

timeline.reversed() ? timeline.play() : timeline.reverse();
$("#teambio").removeClass('active');

Функция .play() или .reverse() запустится и начнет анимацию. Как только эта функция вернется, будет запущена следующая строка, удалив класс. Вы не хотели бы, чтобы следующая строка ожидала анимацию до завершения , потому что тогда все ваши JavaScript будут ждать завершения анимации!

Вместо этого вам следует сделать следующее: используйте onComplete обратный вызов GSAP: 

var timeline = new TimelineMax({
    paused: true,
    reversed: true,
    onComplete: function() {
        $("#teambio").removeClass('active');
    }
});

GSAP будет запускать эту функцию каждый раз, когда анимация завершается.

Кстати, мы рекомендуем вам перейти на GSAP 3 , сделать это легко! Новое форматирование довольно приятно, когда вы к нему привыкли.

...