使用 CSS 转换刷新 jQuery Waypoints

Posted 2023-02-22

【中文标题】使用 CSS 转换刷新 jQuery Waypoints

【英文标题】：jQuery Waypoints Refresh with CSS Transition

【发布时间】：2013-10-23 23:04:07

【问题描述】：

我正在使用航路点来切换基于偏移创建 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 以适应这一点，但事实并非如此。航点/锚点最终高于预期。如果你从一个部分移动到下一个部分，没问题。但是，如果您使用导航跳过某个部分，则部分标题最终会略高于视口顶部。

【问题讨论】：

你有没有试过在你通过他们的部分之后增加以前的标题？似乎 DOM 差异是由于在传递它们后保持标题缩小造成的，对吧？

或者可能将每个连续的标头偏移超过前一个以考虑 DOM 更改？

【参考方案1】：

在课程切换后调用refresh 绝对正确。您确实希望重新计算它提供的触发点。

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

CSS 转换，除了它们的 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');
);

那应该完成工作。

【讨论】：

试一试。这似乎更接近，但我认为过渡的持续时间可能比航路点到达其目标所需的实际时间更长，这可能会使事情有点偏离。我尝试调整过渡持续时间，但这似乎没有帮助。感谢您指出 js 事件...您让我走上了正确的道路 :)

我实际上是使用一些 CSS 来欺骗 DOM。一些负面的保证金行动;)