AOS（滚动动画）在 React js 中不起作用

Question

这是我的App.js代码

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import AOS from "aos";
import "aos/dist/aos.css";
import Home from "../Home/Home";
AOS.init();

function App() {
  return (
    <>
      <div className="App">
        <Router>
          <Route path="/">
            <Home />
          </Route>
        </Router>
      </div>
    </>
  );
}

export default App;

导出默认应用程序；

Home.jsx

import React from "react";

export default function Home() {
  return (
    <>
      <div className="commitments">
        <p data-aos="fade-left">This is text fading</p>
      </div>
    </>
  );
}

我认为这是正确的方法，在使用 data-aos="fade-left" 之前它工作正常，但是当我使用 data-aos 时文本消失了。我不明白这是什么问题。

Answer 1

您应该在应用程序安装后运行

AOS.init();

：

function App() {

  useEffect(() => {
    AOS.init();
  }, []);

  return (
    <>
      <div className="App">
        <Router>
          <Route path="/">
            <Home />
          </Route>
        </Router>
      </div>
    </>
  );
}

由于这个库不是为 React 设计的，所以当你的组件重新渲染时，你可能需要重新初始化它。我建议使用为 React 构建的动画库。

Answer 2

`useEffect(() => { // 使用自定义设置初始化 AOS 设置超时（（）=> { AOS.init({

    duration: 1000, // Duration of animations in ms
    disable: function() {
      // Disable for mobile devices (screen width less than 768px)
      return window.innerWidth < 768;
    }

  });
}, 1000);

}, []);` 这将解决问题