如何在 GSAP 时间轴动画完成后删除 class *之后？

Question

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

因为它要滑入的页面上有可滚动的内容，我已将可见性设置为隐藏，并将其推离页面。当我单击选定的导航 link 时，添加 "active" 的 class 并触发动画。

出于某种原因，当我反转它时，它会立即删除 class，即使我添加了这样的内容：

$(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');
    });

我只想在时间线结束后删除 class，但出于某种原因，我尝试过的所有方法都不起作用。

另外，我知道我可能会比这里显示的更好地构建和命名所有这些，但我是 GSAP 的新手，也只是想让它发挥作用。

如有任何帮助和耐心等待，我们将不胜感激。

Answer 1

像这样：

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

.play() 或 .reverse() 函数将 运行 并开始动画。一旦该函数 returns，下一行将 运行，删除 class。您不希望下一行等待动画 完成 ，因为那样的话您所有的 JavaScript 都将等待动画完成！

您应该改为使用 GSAP 的 onComplete 回调：

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

GSAP 将在每次补间完成时触发该函数。

顺便提一下，我们建议您升级到 GSAP 3 这样做很简单！一旦您习惯了新格式，它就会非常好。