我试图在我的 Nuxt 项目中以“通用”模式使用 AOS,但在切换页面时遇到问题。当我手动重新加载页面时,该工具工作正常,但由于某种原因,当我在页面之间切换时 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>
任何帮助将不胜感激。谢谢。