AOS: 基于 CSS 的“滚动时”动画库

以下是 Michał Sajnóg 的客座文章，他是 Netguru 的前端开发人员。Michał 创建了这些“当您滚动到此处时，触发此动画”库之一。我喜欢它的一点是，它尽可能地将创建和控制动画本身留给 CSS。更不用说它在许多生产网站上表现良好，证明了它本身的价值。我将让 Michał 带您了解它。

您是否曾经见过那些长网页，其中不同的动画会在您向下滚动时应用？我想与您分享一个我编写的插件，它可以非常轻松地使用完全的 CSS 控制处理各种动画，而且没有痛苦。

如果您想直接开始使用它，代码在 GitHub 上。

其他库的问题

在我之前的公司，我们使用 WOW.js（或其他类似库）在滚动时为元素设置动画。对于简单的项目来说，这非常好，但在更大的网站上，我们希望对实际发生的事情有更多控制。在所有流行的库中，动画完全由 JavaScript 通过插入内联 CSS 来处理。啊！内联样式是邪恶的。它们很难控制和覆盖。虽然，在某些情况下，可以使用 JavaScript 来设置它们，但仍然更干净，只需将它们留在它们应该在的地方，并在 CSS 文件中处理所有与 CSS 相关的事情。

我决定创建一个库，它的目标很纯粹——检测元素的位置，然后在它们出现在视口中时添加适当的类。

完全在 CSS 中控制动画

我想用我的新库来划分责任

• 将所有逻辑放在 JavaScript 中
• 将所有动画放在 CSS 中

这使您可以轻松添加自己的动画，并执行诸如根据视口更改动画之类的事情。

AOS 的工作原理

AOS 背后的理念很简单：根据您提供的设置，观察所有元素及其位置。然后添加/删除类 aos-animate。当然，在实践中，它并不总是那么容易，但 AOS 背后的理念就那么简单。动画的各个方面都由 CSS 处理。

CSS 中的动画示例

有很多不同的动画可以立即使用，但创建新的动画也很简单。这是一个示例

[aos="fade"] {
  opacity: 0;
  transition-property: opacity;
}

[aos="fade"].aos-animate {
  opacity: 1;
}

您不必担心持续时间或延迟。在 CSS 中，您只需

• 为 aos 属性添加具有动画名称的样式
• 设置 transition-property（默认情况下为 all，因此如果您将过渡缩小到预期的属性，它将更高效且更可预测）
• 在 .aos-animate 上添加过渡后的属性

持续时间/延迟/缓动之类的内容与动画独立设置。

HTML 示例

<div class="some-item" aos="fade">Example Element</div>

或者使用不同的过渡持续时间

<div class="some-item" aos="fade" aos-duration="500">Example Element</div>

**提示：**您可以使用 data-aos 而不是 aos 使您的 HTML 正确验证。

实时演示

使用不同的动画

查看 CodePen 上 Snik (@michalsnik) 的 Pen AOS – animations。

使用锚点设置

查看 CodePen 上 Snik (@michalsnik) 的 Pen AOS – anchor。

使用锚点放置和不同的缓动

查看 CodePen 上 Snik (@michalsnik) 的 Pen AOS – anchor & anchor-placement。

使用简单的自定义动画

查看 CodePen 上 Snik (@michalsnik) 的 Pen AOS – custom animations。

附加功能

• 锚点 – 基于其他元素的位置为一个元素设置动画
• 锚点放置 – 基于元素在屏幕上的位置为元素设置动画。它不必仅在元素出现在视口中时才设置动画，例如，当它的底部部分接触到屏幕的中间部分时。
• 双向动画 – 默认情况下，元素在您向上和向下滚动时会设置动画，但您可以强制它仅设置一次动画
• 轻松禁用 – 使用预定义的选项（如 mobile、phone、tablet）或自定义条件/函数，在移动设备上禁用动画
• 异步感知 – 在 DOM 更改时重新计算元素的位置，因此在使用 Ajax 加载内容后，您无需担心任何事情（除非您支持 IE9，因为它需要变异观察器）
• 无依赖项 – 此库是用纯 JS 编写的，不依赖于任何依赖项

AOS 完全开源，因此，如果您有一个有趣的想法或某些东西无法按您的预期工作，请打开 issue，并在 GitHub 上 找到您！任何贡献都将受到高度赞赏。