问题标签 [wow.js]

我已经为我的项目集成了 wow.js，但我遇到了动画问题。

我用来为 div 设置动画的动画类只有在我将 animate.css 中的 css 类作为嵌入式样式表粘贴到我的页面中并且即使我在 data-wow-delay=" 5s"和动画在 5 秒后正常工作。如果有人知道为什么会这样，请帮助我。

这是我的代码..

HTML：

CSS：

我有一个简单定义为的 div：

里面有一些内容，比如：

问题是，我的事件处理程序根本无法解决这个问题。事件如下所示：

现在，奇怪的是，当我从 div 类中删除所有引导/哇动画并且只有一个 raw<div></div>时，处理程序按预期工作。

什么可能导致这里的问题？

我有一个代码：

这意味着当#sectionName 的动画结束时触发警报。

它完成了它的工作，但它也会在网站首次启动时触发。

有没有办法防止它？仅当第二次听到动画结束事件时才触发此警报的某种方式？

PS我正在使用wow.js，所以#sectionName对象在滚动到某个页面点后滑入，然后我希望显示警报。

在我使用 wow.js 在滚动时为元素设置动画。它在本地工作得很好，但是当我上传到服务器时，动画类在滚动之前被调用（页面加载）。 点击这里

现场观看。

I'm trying to animate my web page, using the wow.js plugin, but unfortunately, the only animation that I wanna use seems to not work in my case. When I try slideInDown, slideInLeft and others this works fine. I use Bootstrap for my responsive web design.

因此，我正在使用 fullPage.js 创建一个单页样式的网站。我决定要添加一些动画，但是对 jQuery 没有任何了解，我决定选择 animate.css 和 WOW.js 来配合它。

然而，据我了解，fullPage.js 删除了滚动条，因此 WOW.js 无法看到我滚动过去的时间。所以我用

和

删除滚动条。此方法有效，但是由于某种原因，当我滚动到第一部分（页面顶部）时动画消失了。向下滚动时我仍然会看到动画。我怎样才能解决这个问题？（GIF：http: //i.imgur.com/pom46OF.gifv）

编辑：顺便说一下，这是网站 - https://farooq.gq/portfolio/#top

我有一个很难解释的问题，所以请耐心等待，我会尽力解释它。

首先，让我简要介绍一下我正在创建的网站。它以全屏横幅开始，横幅下方有一个充满项目的网格。

我wow.js用来给每个网格项目一个动画。每个项目最初都是隐藏的（因为 wow.js），但是当您向下滚动页面时，它们会从左侧飞入。

我在网格顶部有一些类别链接，它们调用一个工作的自定义 jQuery 函数，该函数根据您单击的链接显示/隐藏某些网格项目。每个链接都有一个与之关联的类别，并在单击时显示具有该类别的所有网格项目。它还隐藏了所有不属于该类别的网格项目。

我的问题是类别链接不会显示该类别中的所有网格项目，除非您滚动到页面底部并加载所有网格项目。链接将仅显示已通过向下滚动加载的网格项目。

如果我删除哇动画，所有网格项目在页面加载时都可见，并且类别链接工作正常，链接完全显示该类别中的所有网格项目。

我真的很想保留令人惊叹的动画，它们看起来很酷，并为无聊的网页赋予生命。

有谁知道在页面加载时以某种方式加载所有元素（网格项）同时保持隐藏 wow.js 效果的方法？

我知道这是一个令人困惑的问题，我可能没有最好地解释它。我将尝试找到一种方法来重新提出我的问题，以便更容易理解，但同时我会保持这个问题活跃。

谢谢！

我在本地电脑上有一个网站并将其链接到 wow.min.js。（我不知道我是应该下载整个库还是只下载那个文件；我两种方式都做了，但仍然没有运气。）我试过了：

下载整个库：

仅在同一目录中使用此文件：

有了这个 CDN：

没有任何运气^ 有了所有这些变化，我将其用作 WOW 集成：

这将是目标元素：

我知道 animate.css 运行良好，因为如果我像这样编写上面的代码：

我看到动画无限地工作。

它不会在滚动到时触发，而是使元素不可见（可见性：隐藏？），您根本看不到目标元素。

可能是什么问题呢？

我从 WOW 的官方 gitHub 页面下载了所有这些文件

该网站的实时链接在这里： http ://stackoverflowproblems.site88.net/index.html

糟糕的站点/主机并且没有照片，因为它们对于我使用的免费主机来说太大（> 1MB）。此外，一旦我上传了 javascript，它就无法正常工作。但这不是这个问题的重点。代码仍然存在，所以希望这已经足够好了。谢谢！

我在一个文档中调用了 WOW.js 和 Animate.js：

但是当我实际使用 WOW.js 时，它根本不起作用，而是将元素全部留空。我知道这些文件和语法是正确的，因为当我在同一目录（相同的索引）中尝试单独的 HTML 文档时，它起作用了：

当我添加其他文档中的内容（例如 bootstrap 和 jQuery）时，它会停止工作。我的问题是：为什么添加更多链接时它不起作用以及如何修复它。我不认为 JSFiddle 或实时链接是必要的，因为问题只是在头脑中，我遵循了其余的语法。但是，如果你真的需要它：

这是插件 WOW.js 和 AnimateCSS 的工作用途： https ://jsfiddle.net/xs2b49qs/

这是插件 WOW.js 和 AnimateCSS 的非工作用途： https ://jsfiddle.net/hv4Lv4g3/

在制作 JSFiddles 时，我还注意到没有文档的 CSS/样式组件，它确实有效。但是一旦我添加了样式 CSS 组件，它就不起作用了。

你们谁能告诉我这是为什么？

感谢所有答案！

我知道我们需要 wow.js 的类型文件，但我无法在任何地方找到它。有没有其他解决方案可以将此外部 js 加载到 webpack 中？