Question

我有一个.header-is-active类，当用户滚动时会应用于<body>标记。

我希望在添加类时触发动画，然后在删除类时反向运行动画。

除动画外，一切都按预期发生。我正在使用jQuery和Greensock来实现一切。

以下是我目前的情况：

$(function() {

    var body = $('body');
    var trigger = $('.trigger');
    var tween = TweenMax.to(trigger, 0.5, {css:{height: "100vh"},});

    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            body.addClass('header-is-active');
            tween();
        } else {
            body.removeClass('header-is-active');
        }
    });
});

我遇到的问题是，无论是否height: 100vh，都会应用补间值.header-is-active。有什么遗失的吗？

Answer 1

在$(window).scroll()功能结束时，请试一试：

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 50) {
        body.addClass('header-is-active');
        tween();
    } else {
        body.removeClass('header-is-active');
    }

    // jQuery way
    if(body.hasClass('header-is-active')) {
        // Run animation
    } else {
        // Run reverse animation
    }

    // Non-jQuery way (just for reference)
    var body = document.body;
    if(body.classList.contains('header-is-active') {
        // Run animation
    } else {
        // Run reverse animation
    }

});

如果它不起作用，因为它正在运行异步，你可以在上面添加一个setTimeout()，这样就可以在你的函数之后调用它。它应该看起来像这样

setTimeout(function() {
    if(body.hasClass('header-is-active')) {
        // run animation
    } else {
        // run reverse
    }
}, 0);

如果body hasClass，则触发Greensock动画

1 个答案: