jQuery Waypoints Refresh with CSS Transition

Question

我正在使用航点来切换一个类，该类基于偏移量创建CSS过渡。这是 css 过渡降低元素的高度。我尝试使用刷新函数在每个航点通过后重新计算 DOM，但我不确定我做得对，或者我在这里受到轻微限制。

您可以在此处查看网站：http://dev.rostylesalon.com/

jQuery('#aboutwrap').waypoint( function() {
    jQuery('#aboutwrap .section-header').toggleClass('header-animate');
$.waypoints('refresh');
}, { offset: 300 });
jQuery('#servicewrap').waypoint( function() {
    jQuery('#servicewrap .section-header').toggleClass('header-animate');
$.waypoints('refresh');
}, { offset: 300 });
jQuery('#contactwrap').waypoint( function() {
    jQuery('#contactwrap .section-header').toggleClass('header-animate');
$.waypoints('refresh');
}, { offset: 300 });

上面的每个节标题都应该切换一个增加/减少其高度的类。我以为"刷新"会重新计算 DOM 以适应这种情况，但事实并非如此。航点/锚点最终高于预期。如果您从一个部分移动到下一个部分，则没有问题。但是，如果您使用导航跳过某个部分，则部分标题最终会略高于视口的顶部。

Answer 1

在类切换后调用refresh，您绝对走在正确的道路上。您确实希望重新计算它提供的触发点。

这里的问题是 CSS 转换是异步发生的。你切换类，你的过渡开始了，同时你的JavaScript已经转移到调用刷新，但你的过渡才刚刚开始。你想要的是等到转换完成，直到调用刷新。

CSS Transitions，除了它们的CSS属性之外，还为我们提供了一个名为transitionend的JavaScript事件。以下是您在页面上使用它（未经测试）的方式。

首先，我想稍微重构一下您现有的代码，使其更容易推理。 您的所有航点都做同样的事情，并且您的部分具有我们可以使用的通用标记。因此，我们可以只进行一次航点调用，并让航点循环通过元素本身。航点回调中的this引用 HTML 元素本身，因此我们将使用它：

jQuery('.section-wrapper').waypoint( function() {
  jQuery(this).find('.section-header').toggleClass('header-animate');
}, { offset: 300 });

好的，现在让我们添加transitionend处理程序：

jQuery('.section-wrapper').waypoint( function() {
  jQuery(this).find('.section-header').toggleClass('header-animate');
}, { offset: 300 });
jQuery('.section-header').on('webkitTransitionEnd transitionend', function() {
  jQuery.waypoints('refresh');
});

这应该可以完成工作。