reactjs - 滚动动画在 React JS 的移动视图中不起作用

Question

我aos在反应中使用图书馆。它在桌面视图中完美运行。我正确初始化了它，但是当我尝试响应模式时，它不起作用。我制作了一个自定义挂钩以更轻松地使用它。这是我的代码：

useAOS.js

import AOS from "aos";

import "aos/dist/aos.css";
const useAOS = () => {
  const settings = {
    duration: 1000,
    mirror: true,
    once: false,
  };
  return { AOS, settings };
};

export default useAOS;

我初始化它的方式：

  const { AOS, settings } = useAOS();
  React.useEffect(() => {
    AOS.init({
      ...settings,
    });
  }, [AOS, settings]);

我想要动画的元素，它是一个 Material UI v5 元素，但它在桌面视图中运行良好。

 <Typography
    variant="h6"
    fontWeight="bold"
    sx={{
      background: "linear-gradient(to right, #eecda3, #ef629f)",
      backgroundClip: "text",
      color: "transparent",
    }}
    component="div"
    data-aos="fade-left"
  >
    Lets Build Something Amazing with GPT-3 Open AI
  </Typography>