问题标签 [aos.js]

我想在我的网站上使用 AOS.js，但我无法将必要的数据属性添加到页面的 DIV。

这是文档中的标记（https://michalsnik.github.io/aos/）：

我的标记如下所示：

有没有办法只使用类来使用 AOS.js？

我在研究时发现了一个类似的问题：使用类添加 aos.js 时遇到问题 但是没有答案。

这是另一个问题的代码，但这不起作用：

有任何想法吗？

我的 HTML 模板中有这段代码：

我如何在反应中使用 AOS 来实现这一点？

当我转到AOS 文档时，我看不到 data-spy 和 data-target 的选项来替换它。

在此先感谢您的帮助。

我是 Rails 6 + Webpack 的新手，所以请耐心等待。

我正在尝试加载aos.js到 Rails 6，然后从视图文件中调用它。

我创建javascript/custom/aos.js了包含此代码的代码，并附加了以下代码段：

console.log("typeof(AOS): " + typeof(AOS))

我application.js的在这里：

当我加载我的页面时，我得到：

typeof(AOS): undefined所以我知道该文件已包含在内，但 AOS 仍未定义。

但是，当我javascript_include_tag在 CDN 链接中包含一个，或者只是将 CDN 代码粘贴到控制台中时，AOS 已定义并且一切正常。

当我在 application.js 中需要它时，为什么 AOS 未定义？谢谢你的帮助！

正如问题所暗示的那样，滚动动画按预期工作，但是当我单击导航栏中的链接时，它确实将我带到同一页面上的联系人部分（例如），但它没有检测到鼠标滚动，因此不会触发该部分的动画。

任何帮助或想法将不胜感激！

编辑：使用 Click 事件从导航栏滚动到所需部分

有人能帮我重新编写一些 aos.js 脚本吗？长话短说，我试图让 aos 在 iF​​rame 中工作。我正在使用 iframeResizer.js，我可以将视口的高度从父页面发送到 iFrame。我还可以发送滚动偏移量。我需要弄清楚的下一点是如何在 aos.js 中使用这些数据。到目前为止，我已经设法将 aos.js 中以前使用窗口的高度和滚动位置的任何内容更改为使用父页面的高度和滚动位置，这看起来很有希望。以前所有 aos 动画在页面加载后立即播放，现在它们等待滚动事件触发。问题是，aos.js 中有一些我不能的代码 为了重写它以触发来自 iframeResizer.js 的回调的滚动，请不要动脑筋。我一直在尝试让这些基于滚动的动画在 iFrame 中运行，这看起来像是永恒的，所以任何帮助都将不胜感激。

因此，据我所知，aos.js 中有一行带有 3 个事件侦听器，其中最后一个是滚动事件。它看起来像这样，但括号中有一些我以前从未见过的奇怪参数。

window.addEventListener("scroll", (0, u.default)(function() {}

我尝试编写自己的函数，但我只是不明白 (0, u.default) 部分是什么或如何使用它。不幸的是，整个 aos.js 脚本远高于我的 JavaScript 水平。如果有人能告诉我如何触发同一个事件监听器，我将非常感激！

我一直在尝试的另一个选择是伪造滚动事件......就像每次滚动位置发生变化并从父级发送到我的 iframe 时我可以伪造一个滚动事件......但我没有任何运气。我想知道这是否可能？

我认为现在这些信息已经足够了，但是如果有人愿意提供帮助并且想要更多信息，请大声喊叫。

谢谢

我在我的 Nuxt.js 站点中通过 npm 使用滚动库上的动画。当我将它添加到我的 plugins/aos.js 并在 nuxt.config.js 插件中配置它时，它工作得很好。但是当我尝试使用云功能部署到 Firebase 托管时，它不起作用。

这是我的插件/aos.js 文件

这是我的 nuxt.config.js 文件

我在设计我的作品集时遇到了 aos。谁能列出它的一些替代品？

还有一些很好的动画效果库，不仅限于滚动吗？

我试图在我的 Nuxt 项目中以“通用”模式使用 AOS，但在切换页面时遇到问题。当我手动重新加载页面时，该工具工作正常，但由于某种原因，当我在页面之间切换时 AOS 停止工作。例如，在我的主页上，我的文本淡出，当我第一次进入主页时，当我将该元素滚动到视图中时它会起作用。但是，如果我离开主页然后在某个时候返回主页，则文本不再淡出并保持隐藏或不透明度为零。

这是aos.js我项目插件目录中的插件

这是插件数组nuxt.config.js

这是我的 Vue 组件中的 HTML 元素。

任何帮助将不胜感激。谢谢。

第一次在这里寻求帮助，希望有一个简单的答案。我在我的网站中使用 AOS - Animate on Scroll 库，我希望能够根据屏幕宽度更改 aos 延迟值，因为我需要根据屏幕尺寸不同的延迟时间。

是否可以将下面的“1300”值称为“数字”，然后通过 CSS 或 javascript 中的媒体查询更改该值？

我没有找到解决这个问题的方法。我尝试在 javascript 中使用 getElementById() 但只能设法更改 div 的内容而不是其中的值。

目前我的解决方法（如下）是为每个延迟长度设置重复的 div，然后使用'display：none;' 我可以根据屏幕大小删除不需要的。这是一个真正的痛苦并且有点混乱，因为我想要很多延迟变化。

感谢任何帮助或想法。

Seems to be a problem to get AOS.js working properly when there is also a Slick.js slider on the same page. How to get this working having both on the page (Slick slider need to be there)

I have included the scripts and css

(also tried with changing some settings differing with: delay, offset, etc. But no luck.

Seems to be a problem caused by Slick-slider. I already tried two other libs (Lax.js and Wow.js) having the same problem (It is even worse in Firefox browser though).

Any advise how to solve this? I do not see it after days of trial and error. Thanks.

This is the live sample: http://testnl10.vini4all.nl/toepassingen/glazuur (aside of the 2 column text) and on the home-page: http://testnl10.vini4all.nl/ (below the banner in the white and gray section)