如何在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()功能将运行并开始动画。该函数返回后，将运行下一行，删除该类。您不希望下一行等待动画完成[[complete，因为那样您的所有JavaScript都将等待动画完成！

您应该做的是利用GSAP的onComplete回调：

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

GSAP将在补间完成时触发该功能。 
顺便说一下，我们建议您升级到GSAP 3，这很容易！一旦习惯了，新的格式就非常好。