javascript - 滚动上的 CSS 技能栏动画

Question

我想做点什么like this .我正在使用 this answer here 中的代码但答案从未完全明确。建议使用this jquery plugin here但我一直无法让它工作。我会使用第一个示例的代码，只是，我使用的是 Foundation 4，进​​度条是它附带的东西，创建起来更简单。此外，第二个示例中提供的动画代码更加简洁——总的来说，第一个示例有点困惑、代码繁重且冗余。

我的代码已上线 here .我正在使用关于部分中的技能栏。在用户到达这一点之前，动画应该暂停。一旦用户滚动到页面的这一部分，动画就会播放。

编辑:此外，如果您有任何建议可以阻止在缩放页面时条形图从其容器中“破裂”出来(本网站旨在响应)，我也将不胜感激。

EDIT2:我注意到我一直在玩这个 overflow: hidden; on .progress 修复了我的“破坏性”问题。但是，当您调整窗口大小时，大小保持在它们初始化时的大小。我知道实际上访问我网站的用户可能不会大量调整窗口大小，但对于查看它的雇主来说，如果它不能正常工作，它会有点蹩脚。我在脾气暴躁的猫按钮覆盖层上遇到了同样的问题，它以第一个大小初始化，之后不调整覆盖层的大小。对此的建议真的非常感谢!

Answer 1

如果你知道你的技能栏在哪里，你知道你的屏幕在哪里，你只需要javascript。 (没有插件或奇怪的东西)

要获取屏幕的垂直位置很简单:

 window.pageYOffset

要获得你的div的垂直位置，你只需要

 div.offsetTop

在你的情况下，我会给包装所有技能栏的 div 一个 id，并设置一个循环 (window.requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame) 来检查你是否在 div 的范围内(比如，如果差异窗口偏移量和 div 之间的值小于某个值)。

如果答案是肯定的，则触发动画。

制作动画的最佳方式是通过 css 过渡。 (如果你需要一个很好的 css 动画介绍，我发现这里有一个视频很有帮助:http://www.youtube.com/watch?v=VoncDvOfUkk)

您可以从 javascript 设置 css 动画。

想法是将所有“米”宽度设置为 0。然后在 javascript 中执行如下操作:

 div.style.transition = "width 1s";
 div.style.width = someValue;

我对包含在 div 中的值的建议是“进度”div 的某个常数分数，例如 % 而不是 em 或 px。这种技术应该有效。 (如果你仍然有问题，你有一个 window.requestAnimationFrame 循环，这样你就可以在每个时间步重新计算值......尽管......注意性能)。

你被推荐 jQuery 的原因是因为当你必须更新所有的 div 以便为它们设置动画时，只需编写 $(this).find('.meter') 然后 addClass('.expand ') 就容易多了。

希望对你有帮助