javascript 严重难倒 WOW.js 并与 animate.css 集成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26224088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Seriously stumped with WOW.js and integrating with animate.css
提问by patski
I'm working on putting together a portfolio site. It's coming along nicely, but I've hit a real shag.
我正在努力建立一个投资组合网站。进展顺利，但我遇到了真正的麻烦。
I'm using one page, and have made four divs thus far to break up my work. I'll have graphic design pieces coming in from one side or the other as the user scrolls.
我正在使用一页，到目前为止已经制作了四个 div 来分解我的工作。当用户滚动时，我将从一侧或另一侧输入图形设计作品。
Now, I found WOW.js which is supposed to do precisely what I want it to, ie. make a graphic of mine show up only when the user scrolls down to it. BUT for the life of me, I cannot get it to work, and it's supposed to be so simple, doge style. Such amaze!
现在，我发现 WOW.js 应该完全按照我的意愿去做，即。使我的图形仅在用户向下滚动到它时显示。但是对于我的生活，我无法让它工作，它应该是那么简单，总督风格。如此惊艳！
The graphic in question is a heart, and animate.css has a great 'pulse' bit of CSS I want to use. WOW.js is supposed to be fabulously with animate.css. But I'm completely lost. My JS skills are still very basic, so please be patient.
有问题的图形是一颗心，animate.css 有一个很棒的“脉冲”位 CSS，我想使用它。WOW.js 应该与 animate.css 完美结合。但我完全迷失了。我的JS技能还很基础，请耐心等待。
As the WOW.js docs state, I've linked to it with:
正如 WOW.js 文档所述，我已将其链接到：
<link rel="stylesheet" href="css/animate.css">
(my CSS folder is named public, but I can't see that making a difference...?)
（我的 CSS 文件夹被命名为 public，但我看不出这有什么不同......？）
This goes at the bottom of my index page:
这在我的索引页底部：
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
I added the CSS class to an HTML element like so:
我将 CSS 类添加到 HTML 元素中，如下所示：
<div class="wow"> Content to Reveal Here </div >
Then you're supposed to add the animate.css style to the element:
然后你应该将 animate.css 样式添加到元素中：
<div class="wow pulse"> Content to Reveal Here </div >
But I'm missing something, because nothing is working. I've googled this and I'm not the only person who's had issues with WOW.js, but I've tried everything, and now I turn to you.
但我错过了一些东西，因为没有任何效果。我在谷歌上搜索过这个，我不是唯一一个对 WOW.js 有问题的人，但我已经尝试了一切，现在我转向你。
Under the customize settings on the docs, it suggests advanced settings:
在文档的自定义设置下，它建议高级设置：
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0 // default
}
)
wow.init();
I'm thinking since this isn't SO AMAZE at all, there's gotta be another way for me to do this, but still be able to use a CSS animation.
我在想，因为这根本不是那么令人惊奇，所以我必须有另一种方法来做到这一点，但仍然可以使用 CSS 动画。
LAST question: how do I make the pulse animation continue? It pulses a few times, then stops, but I want it to continue over and over. Suggestions?
最后一个问题：如何让脉冲动画继续？它脉冲几次，然后停止，但我希望它一遍又一遍地继续。建议？
回答by Gary Riger
Just put this code in your index:
只需将此代码放在您的索引中：
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script><script>new WOW().init();</script>
no need to call for
不需要打电话
<script src="wow.js"></script>
回答by Maciej Jankowski
couple things are happening here:
这里发生了几件事：
</div >is not a proper closing for an html tag.
</div >不是 html 标签的正确结束。
if WOW is not defined then you most likely didn't include wow.js- make sure you have the right file (see what is inside) and the correct path. When you get stuck - Get rid of ALL console errors and make a minimum, bare bone solution that should work - it is less confusing and easier to find what is causing troubles.
如果 WOW 未定义，那么您很可能没有包含wow.js- 确保您拥有正确的文件（查看里面的内容）和正确的路径。当您遇到困难时 - 摆脱所有控制台错误并制定一个应该有效的最小的、简单的解决方案 - 不那么令人困惑并且更容易找到导致问题的原因。
as for repeating pulse animation - just don't. In the old days there were those <blink>and <marquee>tags and they are gone for a reason - you shouldn't use it. Same goes for Comic Sansunless your site is about doge.
至于重复脉冲动画 - 只是不要。在过去，有那些<blink>和<marquee>标签，它们消失是有原因的——你不应该使用它。这同样适用于Comic Sans字体，除非你的网站是公爵。
now, the following example worked for me:
现在，以下示例对我有用：
<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>
