React中如何为异步获取的动态渲染数据添加AOS滚动动画效果

AOS默认在初始化时只会扫描当前页面已挂载的、带data-aos属性的元素。异步请求返回后才渲染的列表元素，挂载时机晚于AOS初始化扫描的时间点，没有被AOS实例收录，自然不会触发滚动动画。

1. 基础安装与全局初始化 #

先安装依赖：

npm install aos
# 或者用yarn
yarn add aos

在项目入口文件（如main.jsx/main.tsx）中完成全局初始化，记得引入配套样式文件：

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

AOS.init({
  duration: 800, // 全局动画时长，单位ms
  offset: 100, // 触发动画的元素距离视口底部的偏移量
  once: false, // 设为true则动画只触发一次，滚动回去不会重复播放
});

2. 异步渲染后触发AOS刷新 #

在数据更新、对应DOM挂载完成后，调用AOS提供的刷新方法，让库重新扫描页面上新增的带动画标记的元素即可。
修正后的组件代码如下：

import { useEffect, useState } from "react";
import AOS from 'aos';
import 'aos/dist/aos.css';

export const Test = () => {
  const [data, setData] = useState([]);
  
  async function fetchData() {
    const response = await fetch(API, {method:"GET"});
    const json = await response.json();
    setData(json);
  }
  
  useEffect(() => {
    fetchData();
  }, []);

  // 监听数据变化，DOM渲染完成后刷新AOS实例
  useEffect(() => {
    if (data.length === 0) return;
    // 加短延时确保DOM已经完成列表渲染，避免扫描不到新元素
    setTimeout(() => {
      AOS.refreshHard();
    }, 100)
  }, [data])
  
  return (
    <>
      {data.map((text, index) => {
        return (
          <div 
            key={index}
            data-aos="fade-up"
            data-aos-delay={index * 100} // 可选：通过递增delay实现错落动画效果
          >
            {text}
          </div>
        )
      })}
    </>
  )
}

• 必须引入aos/dist/aos.css样式文件，否则动画效果完全不会生效
• 如果是分页加载、无限滚动的场景，每次新数据渲染完成后都需要调用一次AOS.refreshHard()，新增的列表项才能正常触发动画
• React 18严格模式下如果出现动画重复触发的问题，可以在初始化AOS前先执行AOS.refreshHard()重置实例状态
• 不需要额外找React封装的动画库，原生AOS本身无框架依赖，React 18版本下可以直接使用，不存在兼容性问题。

内容的提问来源于stack exchange，提问作者Philip F.