React中AOS与react-tsparticles冲突导致AOS失效如何解决

• 问题类型：Bug
• 运行环境：
  • AOS版本：^2.3.4
  • 操作系统：Windows 10
  • 浏览器：Chrome
• 预期行为：AOS滚动动画可正常触发、按配置运行
• 实际行为：基于react-tsparticles封装的Particle组件与AOS存在冲突，导致AOS动画无法生效
• 复现条件：使用react-tsparticles封装<Particles />组件，当该组件作为绑定AOS属性元素的父元素或同级元素时，AOS就会失效，复现代码如下：

<div>
  <Particles />
  <h1 data-aos="fade-up"></h1>
</div>

react-tsparticles默认生成的全屏canvas元素会触发持续DOM重绘，默认定位逻辑会干扰AOS初始化阶段对页面元素偏移量的计算，导致AOS无法正确监听到元素进入视口的时机，最终动画不触发。

• 方案1：修改粒子组件定位配置，避免干扰文档流计算
  给Particles组件传入配置，将其canvas设置为全屏固定定位且层级置于页面内容底部，脱离普通文档流占位：

<Particles
  options={{
    fullScreen: {
      enable: true,
      zIndex: -1
    }
    // 其余原有粒子配置保持不变
  }}
/>

• 方案2：延后AOS初始化时机
  不要在应用入口直接执行AOS初始化逻辑，改在粒子组件挂载完成后再初始化，必要时可增加短延时确保DOM渲染完成：

import { useEffect } from 'react'
import AOS from 'aos'
import 'aos/dist/aos.css'

// 在业务页面组件内执行
useEffect(() => {
  const initAOS = () => {
    AOS.init({
      // 原有AOS配置项，如动画时长、是否仅触发一次等
      duration: 800,
      once: true,
      offset: 100
    })
  }
  // 等待300ms确保粒子组件渲染完成
  setTimeout(initAOS, 300)
}, [])

• 方案3：调整DOM结构，避免嵌套
  将Particles组件作为独立节点放在最外层，不要和绑定了AOS属性的业务元素做父子或同级嵌套：

<>
  {/* 粒子组件单独放置，不与业务内容节点嵌套 */}
  <Particles />
  <div className="page-content">
    <h1 data-aos="fade-up">页面标题</h1>
    {/* 其余带AOS属性的业务元素 */}
  </div>
</>

如果页面存在动态渲染内容、窗口尺寸变化的场景，在对应逻辑执行完成后手动调用AOS.refresh()，强制AOS重新计算所有绑定元素的位置即可。

内容的提问来源于stack exchange，提问作者Axios