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都将等待动画完成！

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

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

每次补间完成时，GSAP将触发该功能。

顺便说一句，我们建议您升级到GSAP 3，这很容易！一旦习惯了，新的格式就很好了。

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

1 个答案: