Nuxt 中的 AOS 在页面之间切换时不起作用

Question

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

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

import Vue from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
Vue.use(AOS.init())

以下是nuxt.config.js中的插件数组

plugins: [
{ src: '~plugins/aos', ssr: false, mode: 'client' },
],

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

<div
:class="{
'py-6': true,
'px-6': !isMobile,
'px-0': isMobile,
}"
data-aos="fade-up"
data-aos-duration="1000"
>
...content in here...
</div>

如有任何帮助，我们将不胜感激。谢谢

Answer 1

接受的答案对于较新的Nuxt版本不再有效。对于在Nuxt中处理浏览器window的库，您必须禁用SSR。你可以阅读更多关于这方面的信息https://nuxtjs.org/docs/directory-structure/plugins/#client-或仅服务器端

export default {
plugins: [
{ src: '~/plugins/aos.js', mode: 'client' }, // only in client side
'~/plugins/aos.client.js', // this syntax also works
]
}

Answer 2

您必须为处理Nuxt中浏览器窗口的库禁用SSR，例如，这应该可以使用

plugins: [
{ src: '~plugins/aos', ssr: false },
],

您可以在文档中找到更多信息https://nuxtjs.org/docs/directory-structure/plugins/#client-或仅服务器端

Answer 3

在可能的情况下，这对我有效，Nuxt 2:

// ~/plugins/aos.js
import Vue from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css' // If you need load compiled AOS css here in plugin
class AosPlugin {
config = {
// Your AOS config here
}
install(Vue) {
AOS.init(this.config)
Vue.mixin({
updated() {
this.$nextTick(function () {
AOS.refreshHard() // This is needed to avoid the un-animate aos effect
})
}
})
}
}
Vue.use(new AosPlugin())

//file.vue
<template>
...
</template>
<script>
import 'aos/dist/aos.css'
export default {
//use async
async mounted() {
const AOS = await import('aos');
AOS.init();
}
//or not
mounted() {
import('aos').then(AOS => AOS.init());
}
}
</script>

资源参考：https://github.com/michalsnik/aos/issues/87#issuecomment-615953927