如何在 ReactJS 项目中使用 AOS css 库？

【问题标题】：How to use AOS css library with ReactJS project?如何在 ReactJS 项目中使用 AOS css 库？
【发布时间】：2020-02-04 00:22:55
【问题描述】：

反应相当新，所以我想知道是否有人可以给我一个关于如何使用 AOS 的逐步纲要？我已经做了 yarn add aos。谢谢！！

【问题讨论】：

【解决方案1】：

如果您指的是 AOS 滚动库，您必须导入它并在 App.js 文件中调用它，然后调用 init 函数：

 import Aos from 'aos';

function App() {
  Aos.init();
  return (
    <div className="App">
    
    </div>

  );
}

export default App;

并为每个要设置动画的元素添加一个 aos 类名称，例如：

<div data-aos="fade-down"> im a div </div>

您可以在 AOS 文档中找到更多动画选项：https://michalsnik.github.io/aos/

更新：您还需要像这样导入 AOS CSS：

import 'aos/dist/aos.css';

【讨论】：