我在开发WordPress主题的时候为了美化页面会需要针对页面的元素去制作一些小动画，css动画写多了嫌烦，就去github上翻腾翻腾，发现了这个叫做aos的jQuery动画插件库，试了一下觉得还不错，我们的Verdure主题(Verdure 主题演示站 – 官方演示站)就使用了aos.js库制作了页面滚动时模块元素的入场出场动画，效果不错。

aos.js是一款页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。在页面往回滚动时，元素会恢复到原来的状态。接下来给大家详细介绍一下aos.js，使用很简单。

aos.js 插件Github地址：https://github.com/michalsnik/aos

使用方法

首先在页面中引入aos.css文件,jquery和aos.js文件

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
    AOS.init();
</script>

初始化AOS

// https://www.themeke.com
AOS.init();

// 您还可以传递一个可选的设置对象 
// 下面列出的默认设置 
AOS.init ({
  // 全局设置: 
  disable : false ,  // 接受以下值：'phone', 'tablet', 'mobile', boolean, expression or function 
  startEvent : 'DOMContentLoaded' ,  // AOS初始化
  initClassName : 'aos-init' ,  // 初始化后应用的类 
  animatedClassName : 'aos-animate' ,  // 动画上应用的类 
  useClassNames : false ,  // 如果为真，将添加 `data -aos` as classes on scroll 
  disableMutationObserver : false ,  // 禁用自动变化检测（高级） 
  debounceDelay : 50 ,  // 调整窗口大小时使用的去抖动延迟（高级） 
  throttleDelay : 99 ,  // 使用的节流延迟滚动页面（高级） 
  

  // 可以通过 `data-aos-*` 属性基于每个元素覆盖的设置： 
  offset : 120 ,  // 从原始触发点偏移（以 px 为单位） 
  delay : 0 ,  // 值从 0 到 3000，步长 50ms 
  持续时间 ： 400 ，  // 值从 0 到 3000，步长 50ms 
  easing : 'ease' ,  // AOS 动画 默认淡入淡出
  once : false ,  // 动画是否应该只发生一次 - 向下滚动时 
  mirror : false ,  // 元素是否在滚动经过它们时动画出来 
  anchorPlacement : 'top-bottom ' ,  // 定义元素在窗口的哪个位置应该触发动画 
});

设置动画使用 data-aos属性

  <div data-aos="fade-in"></div>

通过使用 data-aos-* 属性调整行为

  <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

API

AOS 对象作为全局变量公开，目前有三种方法可用：

init- 初始化 AOS
refresh- 重新计算元素的所有偏移量和位置（在窗口调整大小时调用）
refreshHard- 使用 AOS 元素和触发器重新初始化数组refresh（调用与aos元素相关的 DOM 更改）

示例：

  AOS.refresh();

默认情况下，AOS 监视 DOM 更改，如果有任何新元素异步加载或从 DOM 中删除某些内容，它会refreshHard自动调用。在不支持MutationObserverIE之类的浏览器中，您可能需要AOS.refreshHard()自己调用。

JS 事件

document.addEventListener('aos:in', ({ detail }) => {
  console.log('animated in', detail);
});

document.addEventListener('aos:out', ({ detail }) => {
  console.log('animated out', detail);
});

还可以通过设置data-aos-id属性告诉 AOS 在特定元素上触发自定义事件：

<div data-aos="fade-in" data-aos-id="super-duper"></div>

然后您将能够监听两个自定义事件：

aos:in:super-duper
aos:out:super-duper

四时宝库

程序员的知识宝库

超赞的jQuery动画库插件aos.js（js 动画插件）

使用方法

初始化AOS

设置动画使用 data-aos属性

API

JS 事件