滚动动画AOS的使用

项目开发过程中可能会要求整体灵动，用到滚动动画库aos

   安装 AOS

使用yarn、npm、bower安装

yarn add aos

npm install aos --save

bower install aos --save

CDN源

CSS

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 

JS

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

初始化

<script>   AOS.init(); </script>

配置初始化

AOS.init({
    disable: 'phone',   // 禁用手机设备上的动画

    startEvent: 'DOMContentLoaded', // 初始化的事件，默认是DOM内容加载完成

    initClassName: 'aos-init', // 初始化完成后添加的类名

    animatedClassName: 'aos-animate', // 动画激活时添加的类名

    useClassNames: false, // 是否将"data-aos"属性值作为类名添加到元素上

    disableMutationObserver: false, // 是否关闭自动检测DOM变化的功能

    debounceDelay: 50, // 延迟时间，用于防抖处理，单位是ms

});

用法

放在要滚动出现的盒子最顶部 data-aos后面是动画名称。

data-aos="fade-up"

data-aos-du-duration是滚动持续时间

data-aos-du-duration="800"