Javascript GSAP时间轴动画*完成后，如何删除类*？

我创建了一个简单的GSAP时间轴动画，可以在整个视口上滑动全屏div

因为它要滑入的页面上有可滚动的内容，所以我将可见性设置为hidden，并将其从页面中推出。当我单击选定的导航链接时，会添加“活动”类，并触发动画

出于某种原因，当我将其反转时，它会立即删除该类，即使我添加了如下内容：

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

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都是新手，也只是想让它发挥作用

---

任何帮助和耐心都将不胜感激。

对于这样的事情：

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

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

.play（）

或

.reverse（）

功能将运行并开始设置动画。一旦该函数返回，下一行将运行，删除该类。您不希望下一行等待动画完成，因为这样所有JavaScript都将等待动画完成

相反，您应该使用GSAP的

onComplete

回调：

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

GSAP将在tween每次完成时启动该功能

---

顺便说一下，我们建议您升级到这样做很容易！一旦你习惯了新的格式，它就相当不错了。

我觉得我应该添加一个功能，让用户点击一个链接，然后div向上滑动。在div内部有一个“关闭”按钮，可以启动时间线反转。在时间轴反转，div移出视图后，有没有办法运行removeClass？现在，在动画启动并将div移动到视图中后，它将删除该类，导致div在显示后立即消失。@samlynndavis当然，请在时间轴的vars参数中使用

onReverseComplete

。