使用CSS过渡刷新jQuery Waypoints

我正在使用航点来切换一个基于偏移量创建CSS过渡的类。 这是css过渡减少元素的高度。 我尝试使用刷新function在每个路点通过后重新计算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事件。 以下是您在页面上使用它（未经测试）的方法。

首先，我想稍微重构一下你现有的代码，以便更容易推理。 你所有的航点都做同样的事情，你的部分有我们可以使用的共同标记。 所以我们只能让这个waypoint调用一次，让Waypoints遍历元素本身。 在路点回调中，这是指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'); }); 

那应该完成工作。