演示地址

注意node版本和静态版本方法使用方法不同

web中使用

1、引入文件和Jquery

<link rel="stylesheet" href="dist/aos.css" />
<script src="js/jquery.min.js"></script>
<script src="dist/aos.js"></script>

2、初始化

// 全局设置放在这里
AOS.init({
    easing: 'ease-out-back',
    duration: 1000
});

3、页面使用方法

<div aos="fade-up"></div>

4、配置项

---

属性	属性	属性	默认值
aos-offset	是立刻触发动画还是在指定时间之后触发动画	200	120
aos-duration	动画持续时间	600	400
aos-easing	动画的easing动画效果	ease-in-sine	ease
aos-delay	动画的延迟时间	300	0
aos-anchor	锚元素。使用它的偏移来取代实际元素的偏移来触发动画	#selector	null
aos-anchor-placement	锚位置，触发动画时元素位于屏幕的位置	top-center	top-bottom
aos-once	动画是否只会触发一次，或者每次上下滚动都会触发	true	false

---

vue项目中使用

1、在页面中引用

import AOS from "aos";
import "../node_modules/aos/dist/aos.css"; // 文件可以复制到项目中的style目录中调用
Vue.use(AOS);

2、初始化

AOS.init()

3、使用

<div data-aos="fade-up" data-aos-duration="2000"> 

4、配置项和web端相同，但是需要在前面加上data-