时间戳

首页 > 解决方案 > 如何*在* GSAP 时间线动画完成后删除一个类？

javascript - 如何*在* GSAP 时间线动画完成后删除一个类？

问题描述

我创建了一个简单的 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 的新手，也只是想让它发挥作用。

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

标签： javascriptjquerygsap

解决方案

像这样：

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

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

你应该做的是利用 GS​​AP 的onComplete回调：

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

每次补间完成时，GSAP 都会触发该函数。

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

推荐阅读