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

问题描述

我试图在“通用”模式下的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>

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

解决方法

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

应该可以