标签: aos.js

我想知道如何在Next.Js 13中正确实现滚动触发的动画。

我尝试使用像AOS这样的滚动触发动画库，但为了使其工作，需要在 useEffect 挂钩内初始化它，这需要客户端渲染。现在，如果我只将它用于一个组件（并且仅用于通过“使用客户端”声明客户端渲染的该组件），那么所有这些都可以，但这不是一个选项，因为我想让 AOS 可以跨我的整个应用程序，以便页面的所有组件和部分都可以使用它，因此，这意味着，如果我做对了，所有内容都将使用客户端渲染（因为我在根处声明（为了能够使用useEffect）），这不是我想要的。

有没有更好的方法来实现这一点，或者我只是以错误的方式理解这一点？我是 Next.Js 的新手，所以如果这个问题更“愚蠢”，我很抱歉，但我找不到或找出答案，所以我决定在这里问它。我很高兴听到您的回答。:)

这是我的App.js代码

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import AOS from "aos";
import "aos/dist/aos.css";
import Home from "../Home/Home";
AOS.init();

function App() {
  return (
    <>
      <div className="App">
        <Router>
          <Route path="/">
            <Home />
          </Route>
        </Router>
      </div>
    </>
  );
}

export default App;

导出默认应用程序；

首页.jsx

import React from "react";

export default function Home() {
  return (
    <>
      <div className="commitments">
        <p data-aos="fade-left">This is text fading</p>
      </div>
    </>
  );
}

我认为这是正确的方法，在使用 data-aos="fade-left" 之前它工作正常，但是当我使用 data-aos 时文本消失了。我不明白这是什么问题。

有人已经在 Vue3 中使用过 AOS 或 vue-aos 包吗？

尽管禁用了配置，但我还是收到了一堆错误，可能是由于 ssr （Vue 未定义，文档未定义）所致。

nuxt.config.ts

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

插件/aos.ts

import VueAOS from "vue-aos"

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(VueAOS)
})

我尝试了这种方式，我尝试了使用cdn文件的方式（但它导致使用.init（）时未定义AOS并且两者都不起作用。每个关于AOS的教程都与Nuxt2相关。

我还尝试将vue-aos包放在 nuxt 配置上的 build.transpile 上，但没有成功。

多谢

我是 Rails 6 + Webpack 的新手，所以请耐心等待。

我正在尝试加载aos.js到 Rails 6 中，然后从视图文件中调用它。

我创建了javascript/custom/aos.js包含此代码并附加了以下代码片段的代码：

console.log("typeof(AOS): " + typeof(AOS))

我application.js的在这里：

require("jquery")
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("custom/aos") // <===== The custom file I'm importing

var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);
require("trix")
require("@rails/actiontext")

当我加载页面时，我得到：

typeof(AOS): undefined所以我知道该文件已被包含，但 AOS 仍未定义。

但是，当我包含javascript_include_tagCDN 链接，或者只是将 CDN 代码粘贴到控制台中时，AOS 已定义并且一切正常。

当我在 application.js 中需要 AOS 时，为什么它未定义？感谢您的帮助！