动画库的使用

一、AOS动画库的使用

1、官网地址：http://michalsnik.github.io/aos/

2、安装：

npm install aos -S

3、main.js中引入：

import AOS from 'aos'
import 'aos/dist/aos.css'
AOS.init() //初始化

4、初始化设置：

AOS.init({
  //全局设置：
  disable: false, //接受以下值：'phone','tablet','mobile',布尔值，表达式或函数,禁用不同设备下的aos
  startEvent: "DOMContentLoaded", //在文档上分派的事件的名称，AOS应该在该事件上进行初始化
  initClassName: "aos-init", //初始化后应用的类
  animatedClassName: "aos-animate", //应用于动画的类
  useClassNames: false, //如果为真，将在滚动中添加data-aos的内容作为类
  disableMutationObserver: false, //取消自动突变检测(高级)
  debounceDelay: 50, //在调整窗口大小时使用的取消延迟(高级)
  throttleDelay: 99, //滚动页面时使用的油门延迟（高级）

  //可以通过data-aos属性逐个设置的设置：
  offset: 120, //初始触发点的偏移量(单位:px)
  delay: 0, //延迟时间值从0到3000 ，步长为50毫秒，
  duration: 400, //持续时间,值从0到3000，步长为50毫秒
  easing: "ease", // AOS动画的默认缓动
  once: false, //动画是否应该只发生一次
  mirror: false, //当滚动经过元素时，是否应该将其动画化
  anchorPlacement: "top-bottom", //定义元素相对于窗口的哪个位置应该触发动画
});

5、常见动画：

 ① 淡入淡出动画：

• fade-up
• fade-down
• fade-left
• fade-right
• fade-up-right
• fade-up-left
• fade-down-right
• fade-down-left

② 翻转动画：

• flip-up
• flip-down
• flip-left
• flip-right

③ 滑动动画：

• slide-up
• slide-down
• slide-left
• slide-right

④ 缩放动画：

• 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

⑤ 锚位置

• top-bottom
• top-center
• top-top
• center-bottom
• center-center
• center-top
• bottom-bottom
• bottom-center
• bottom-top

⑥ easing动画

你可以使用以下的一些easing动画效果：

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• ease-in-back
• ease-out-back
• eas