我在开发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.comAOS.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