严重难倒 WOW.js 并与 animate.css 集成答案

【问题标题】：Seriously stumped with WOW.js and integrating with animate.css严重难倒 WOW.js 并与 animate.css 集成
【发布时间】：2014-10-06 20:11:04
【问题描述】：

我正在组建一个投资组合网站。它进展顺利，但我遇到了真正的麻烦。

我正在使用一页，到目前为止已经制作了四个 div 来分解我的工作。当用户滚动时，我会从一侧或另一侧进入平面设计作品。

现在，我找到了 WOW.js，它应该完全按照我的意愿去做，即。仅当用户向下滚动到它时才显示我的图形。但就我的一生而言，我无法让它发挥作用，而且它应该是如此简单，总督风格。太神奇了！

有问题的图形是一颗心，而 animate.css 有一个我想使用的很棒的“脉冲”CSS。 WOW.js 应该与 animate.css 完美结合。但我完全迷失了。我的JS技能还很基础，请耐心等待。

正如 WOW.js 文档所述，我已将其链接到：

<link rel="stylesheet" href="css/animate.css">

（我的 CSS 文件夹名为 public，但我看不出有什么不同...？）

这在我的索引页的底部：

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

我将 CSS 类添加到 HTML 元素中，如下所示：

<div class="wow">  Content to Reveal Here  </div >

那么你应该给元素添加 animate.css 样式：

<div class="wow pulse">  Content to Reveal Here  </div >

但我错过了一些东西，因为没有任何工作。我用谷歌搜索了这个，我不是唯一一个对 WOW.js 有问题的人，但我已经尝试了所有方法，现在我求助于你。

在文档的自定义设置下，它建议高级设置：

wow = new WOW(
    {
    boxClass:     'wow',      // default
    animateClass: 'animated', // default
    offset:       0          // default
   }
)
wow.init();

我在想，因为这根本不是 SO AMAZE，所以我必须有另一种方法来做到这一点，但仍然可以使用 CSS 动画。

最后一个问题：如何使脉冲动画继续？它会跳动几次，然后停止，但我希望它一遍又一遍地继续。有什么建议吗？

【问题讨论】：

href 标签需要指向 CSS 文件。你说你有一个名为“public”的文件夹，所以它应该是href="public/animate.css"，而不是href="css/animate.css"
那是我的错误。我的实际代码确实将其正确键入为 href="public/animate.css"
控制台有错误吗？
我完全忘记检查控制台了！好的，我有两条 ERR_FILE_NOT_FOUND 消息。一种是 javascript/index.js。我很确定我删除了那个文件，因为我认为我不再需要它了。但这可能不是的情况。第二个错误真的让我很困惑，因为它正在我的 github.io 文件夹下寻找一个名为 js/wow.min.js 的文件。我不知道那是什么。最后，最后一个错误显示“WOW 未定义”。这是有道理的，但我不确定我应该如何定义它。

标签： javascript css animation

【解决方案1】：

只需将此代码放入您的索引中：

<script src="//cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script>
<script>new WOW().init();</script>

无需调用

<script src="wow.js"></script>

【讨论】：

希望我在一小时前看到你的回答，加里。我使用了您的代码，并略微更新了版本，它立即解决了我的问题。

【解决方案2】：

这里发生了几件事：

</div > 不是 html 标记的正确关闭方式。

如果未定义 WOW，那么您很可能没有包含 wow.js - 确保您拥有正确的文件（查看里面的内容）和正确的路径。当您遇到困难时 - 摆脱所有控制台错误并制定一个可行的最低限度的基本解决方案 - 它会减少混乱并更容易找到导致问题的原因。

至于重复脉冲动画 - 只是不要。在过去，有<blink> 和<marquee> 标签，它们消失是有原因的——你不应该使用它。 Comic Sans 也是如此，除非您的网站是关于 doge 的。

现在，以下示例对我有用：

<html>
<head>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<script src="wow.js"></script>
<script>
  new WOW().init();
</script>
<img  src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" /><br>

<div class="wow  bounceInUp">
<img  src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>

<div class="wow pulse">
<img  src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>

</body>
</html>

【讨论】：

感谢 Maciej。我会让你知道这是如何进展的。另外，我发布的代码是从开发者网站直接复制和粘贴的，所以这就是结束
的来源。