我有一类 .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/