如何*在* GSAP時間軸動畫完成后刪除類？

Question

我創建了一個簡單的 GSAP 時間線動畫來在整個視口上滑動全屏 div。

因為它要滑入的頁面上有可滾動的內容，所以我將可見性設置為隱藏，並將其推離頁面。 當我單擊選定的導航鏈接時，會添加“活動”類並觸發動畫。

出於某種原因，當我反轉它時，它會立即刪除該類，即使我添加了如下內容：

$(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 的新手，也只是試圖讓它發揮作用。

任何幫助和耐心將不勝感激。

Answer 1

像這樣：

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

.play()或.reverse()函數將運行並開始動畫。 一旦該函數返回，下一行將運行，刪除該類。 您不希望下一行等待動畫完成，因為那樣您的所有 JavaScript 都將等待動畫完成！

你應該做的是利用 GS​​AP 的onComplete回調：

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

每次補間完成時，GSAP 都會觸發該函數。

順便說一下，我們建議您升級到GSAP 3，這樣做很容易！ 一旦您習慣了新格式，它就會非常好。