如何在 Next.js 13 中实现滚动触发的动画？

Question

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

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

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

Answer 1

我能够通过这样做来使其工作：

1. 创建了一个名为 AOS.jsx 的可重用组件，如下所示：

import { useEffect } from 'react';

import AOS from "aos";
import "aos/dist/aos.css";

export default function AOSComponent({
    children,
}: {
    children: React.ReactNode
}) {
    useEffect(() => {
        AOS.init()
    }, [])

    return <>{children}</>
}

2. 在我需要 AOS 功能的每个“客户端”页面上，我将页面元素包装在其中，如下所示：

'use client'
...
import AOSComponent from '@/components/AOS';

export default function Home() {
  return (
    <AOSComponent>
      <div>
        Homepage
      </div>
    </AOSComponent>
  )
}