每当页面重新加载时，AOS 和 NUXT JS 中的动画块往往会消失答案

【问题标题】：Animated blocks in AOS and NUXT JS tends to disappear whenever the page reloads每当页面重新加载时，AOS 和 NUXT JS 中的动画块往往会消失
【发布时间】：2021-07-05 22:09:05
【问题描述】：

我正在开发一个项目并使用 AOS 动画，但是每当我刷新页面时，所有带有动画的 div 块都会消失。我想在页面刷新时触发一个函数，这样我就可以使用AOS.refresh()。有没有办法在 nuxt.js 中做到这一点，或者有办法绕过这个 AOS 错误？

更新：这是一个示例，这是页面在重新加载之前的外观：

然后在重新加载后：

如您所见。重新加载后仍然出现的元素是没有AOS动画的元素。

此外，如果您将注意力集中在侧边栏上，请注意我有一个主页。除了主页，这个问题几乎无处不在。当我转到主页然后我回到其他页面时，问题基本上消失了。

【问题讨论】：

您还应该询问 AOS 项目，因为他们可能有一个标准的方式来自动完成。
我已经看过了，我在问题部分的 github 中发现了问题，似乎没有办法在 AOS 中修复它，除非我分叉 repo 并自己修复它
这似乎更可能是数据获取或生命周期的问题。你有 github 或托管在代码沙箱上的东西来向我们展示吗？不知道从这些屏幕截图中能得到什么。
刷新页面时我并没有真正得到任何错误。不过我没有代码框可以给你看……
我可以给你我的仓库的链接，这样你就可以检查出你想要的@kissu

标签： vue.js nuxt.js aos.js

【解决方案1】：

不确定您的错误来自哪里，但到目前为止，库的主页实现了页面刷新时的动画。也许在某些时候这是一个生命周期代码问题。也许可以为我们发布一些来帮助您调试这个。

据我所知，无法查看您的网页是否真正刷新，因为在此之前没有任何与状态相关的内容。有时可能会用到的唯一有用的东西是this.$router.history._startLocation，它将为您提供加载 web 应用程序的第一个路径。
不知道它是否对你有帮助。

另外，您可以试一试library in VueJS 并将其连接到 Nuxt。应该表现得差不多。

【讨论】：

我已经更新了问题，请检查并告诉我您的想法