gpt4 book ai didi

javascript - 如果主体具有类,则触发 Greensock 动画

转载 作者:行者123 更新时间:2023-11-28 04:10:13 25 4
gpt4 key购买 nike

我有一类 .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 都被应用或不。有什么东西不见了吗?

最佳答案

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

关于javascript - 如果主体具有类,则触发 Greensock 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42753602/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com