AOS.JS

Animation of Scroll 基于CSS3 animation，不支持低版本浏览器；
和基于Animation.css的收费库WOW.JS相似，但有自己的特色；

npm官网 aos.js

• 安装
  npm i aos --save

• 手动添加

<link rel='stylesheet' href='_base_file_/aos.css'>
<script src='_base_file_/aos.js'>script>
<script>
	AOS.init();
script>

• 配置

1. 默认

AOS.init({
	offset:120,//px，提前或延迟触发
	duration:400,//ms，过渡时间，50-3000
	easing:ease,//时间曲线
	delay:0,//s，延迟执行
	anchor:null，//body，指定元素触发，Element
	anchor-placement:top-bottom,//top向bottom滚动，top和bottom触发，top|center|bottom任意二个组合，分先后方向，可重复如center-center
	once:false//是否仅触发一次
})

2. 自定义过渡时间，取消50-3000的限制
   例如：5秒

body[data-aos-duration='5000'] [data-aos], [data-aos][data-aos][data-aos-duration='5000']{
    transition-duration: 5000ms;
  }

小技巧：俩[data-aos]的写法，提高优先级，不必!important；

3. 应用到元素

<div data-aos="animation_name">

默认配置项，前加data-aos-，作用到元素

• API
  AOS.init()
AOS.refresh() 窗口大小改变时，AOS默认监听，可以手动执行
  AOS.refreshHard()

• 其他

1. 禁用

AOS.init({
	disable:false,//禁用，false|mobile|phone|tablet
	//或者，自定义规则
	disable:window.innerWidth > 400
	//或者，传入函数，return false|true
	disable:function(){
		returen window.innerWidth > 400
	}
})

2. 自定义初始化触发事件

	AOS.init({
		//默认 DOMContentLoaded 事件，
		// 指定 某事件触发后，触发AOS初始化
		startEvent: "Element_Event"
		//例如，window的load事件
		startEvent: "load"
	})

• 动画列表：data-aos:

1. fade类：fade、fade-up、fade-down、fade-left、fade-right、fade-up-left、fade-up-right、fade-down-left、fade-down-right
2. flip类：flip-up、flip-down、flip-left、flip-right
3. slide类：slide-up、slide-down、slide-left、slide-right
4. zoom类：zoom-in、zoom-in-up、zoom-in-down、zoom-in-left、zoom-in-right、zoom-out、zoom-out-up、zoom-out-down、zoom-out-left、zoom-out-right

• 时间曲线：data-aos-easing:
  linear、ease、
  ease-in、ease-out、ease-in-out、
  ease-in-back、ease-out-back、ease-in-out-back、
  ease-in-sine、ease-out-sine、ease-in-out-sine、
  ease-in-quad、ease-out-quad、ease-in-out-quad、
  ease-in-cubic、ease-out-cubic、ease-in-out-cubic、
  ease-in-quart、ease-out-quart、ease-in-out-quart