无需 CSS 的 CSS 动画 - 纯 JS 和 React 实现 AOS
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
“CSS 很美，但很难”。
大多数开发者都会同意这种说法。事实上，很多后端开发者正是因为前端的难度而放弃了前端开发。CSS动画是CSS中最难的部分之一。不过，好消息是，情况已经有所好转。
开发者们一直在开发各种库，帮助我们避免编写过多不必要的 CSS 代码。这太棒了！！！
在本文中，我将向您介绍其中一个库，它叫做AOS（Animation on Scroll，滚动动画）。
AOS 是GitHub上的一个免费库，它不仅可以帮助你为网站添加动画效果，还可以确保动画仅在你滚动到网站的相应部分时才会发生。
无需赘言，让我们直接进入实践环节。我将演示如何在 React 和纯 JavaScript 项目中使用它。
纯 JavaScript
入门项目
点击此处获取 React 入门项目
设置和初始化
- 将以下 CSS 链接添加到 head 标签中。
index.html
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
- 在结束的 body 标签之前添加以下脚本
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
- 在
scripts.js文件中，添加以下代码以初始化 AOS
AOS.init();
导航动画
添加data-aos="fade-right"以下nav代码，使其从右侧淡入：
<!-- nav -->
<nav class="navbar navbar-default" data-aos="fade-right">
<div class="navbar-header">
<h1>Navigation</h1>
</div>
</nav>
您可以在浏览器中查看。
AOS 还提供了其他选项，例如普通的 CSS 动画。所以，让我们优化一下动画流程，稍微减慢一下速度。
nav现在看起来是这样的。
<!-- nav -->
<nav
class="navbar navbar-default"
data-aos="fade-right"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out-cubic"
>
<div class="navbar-header">
<h1>Navigation</h1>
</div>
</nav>
你看，nav动画更流畅了吗？这就是它的魅力所在！
现在你明白了吧。按照你想要的方式为网页的其他部分添加动画效果。
最终的纯 JavaScript 代码
React
入门项目
点击此处获取 React 入门项目
设置和初始化
- 使用以下代码安装 AOS
npm install aos --save
App.js使用以下代码在文件中导入并初始化 AOS
import AOS from "aos";
import "aos/dist/aos.css";
AOS.init();
导航动画
data-aos="flip-left"在该部分添加nav以下内容，使其向左翻转：
<!-- nav -->
<nav className="navbar navbar-default" data-aos="flip-left">
<div className="navbar-header">
<h1>Navigation</h1>
</div>
</nav>
您可以在浏览器中查看。
AOS 还提供了其他选项，例如普通的 CSS 动画。所以，让我们优化一下动画流程，稍微减慢一下速度。
nav现在看起来是这样的。
<!-- nav -->
<nav
className="navbar navbar-default"
data-aos="flip-left"
data-aos-delay="50"
data-aos-duration="2000"
data-aos-easing="ease-in-out-cubic"
>
<div className="navbar-header">
<h1>Navigation</h1>
</div>
</nav>
你看，nav动画更流畅了吗？这就是它的魅力所在！
现在你明白了吧。按照你想要的方式为网页的其他部分添加动画效果。
最终 React 代码
- 所有代码都在这里
结论
AOS有很多功能，我鼓励你多尝试，看看能得到什么结果。
如果您有任何问题或意见，请在评论区留言。下次见。
文章来源：https://dev.to/ebereplenty/css-animation-without-css-aos-in-plain-js-and-react-4jfj