时间戳

首页 > 解决方案 > Nuxt 中的 AOS 在页面之间切换时不起作用

javascript - 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>

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

标签： javascriptvue.jsnuxt.jsaos.js

解决方案

接受的答案对于较新的 Nuxt 版本不再有效。window对于在 Nuxt中处理浏览器的库，您必须禁用 SSR 。您可以阅读有关此https://nuxtjs.org/docs/directory-structure/plugins/#client-or-server-side-only的更多信息

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

推荐阅读