如何在滚动效果上添加动画以获取数据反应

Question

语境：

我想向填充了来自服务器的数据的多个 div 添加 AOS 效果，这些数据在初始渲染之后渲染：

 import {useEffect, useState} from "react"; export const Test = () => { const [data, setData] = useState([]); async function fetchData() { //Example fetch request const response = await fetch(API, {method:"GET"}); const json = await response.json(); setData(json); } useEffect(() => {fetchData();}, []); return ( <> { data.map((text, index) => { //add aos effect to each div <div key={index}> {text} </div> }); } </> ) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我试过的：

我尝试导入AOS并将其添加为这个问题：

<div key={index} data-aos="fadeIn"></div>

这根本没有效果。

我还查看了react-animate-on-scroll ，但它与 react v. 18.1.0 不兼容：

问题：

如何在滚动（AOS）上获得动画以处理获取的数据以做出反应？

Answer 1

我发现了错误。 我还必须导入 aos css 文件：

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

Answer 2

您是否首先初始化了 AOS？

  <script>
    AOS.init();
  </script>

由于反应渲染性质，您可能需要刷新 AOS，它会在每次组件更新时渲染新的 html 元素。

  AOS.refresh();

Answer 3

我会尝试提供动画或使用 Intersection Observer 的课程