5 分钟给静态页面加上滚动动画：AOS 从上手到排错

5 分钟给静态页面加上滚动动画：AOS 从上手到排错

【免费下载链接】aosAnimate on scroll library项目地址: https://gitcode.com/gh_mirrors/ao/aos

页面一屏屏往下滚，读者扫完就走，关键内容根本没被记住。AOS（Animate on Scroll）要解决的就是这一件事：让元素在滚入视口时做一段进场动画——你只管写 HTML 属性，它负责挑时机、加一个类名去触发 CSS 过渡。不依赖 jQuery，核心逻辑就一个文件。

一条命令完成安装

先装包（当前发布版走@next）：

npm install --save aos@next

页面里引入样式和脚本，再初始化，就能立刻看到效果：

<link rel="stylesheet" href="dist/aos.css" /> <!-- 脚本放在 </body> 之前 --> <script src="dist/aos.js"></script> <script> AOS.init({ offset: 120, // 距视口顶多少像素时触发 duration: 400, once: false // false：滚回来再播一次 }); </script>

按想要的效果找对应配置

机制先说清楚：AOS 监听滚动，判断元素进入触发点就给它加上aos-animate类，CSS 过渡随即播放。data-aos的值用内置名即可——fade 系 9 个、zoom 系 9 个、slide 系 4 个、flip 系 4 个，共 26 个。

逐个入场（stagger）同批元素错峰进场，靠data-aos-delay拉开节奏，卡片、列表最常用：

<div><!-- 这一格无视全局，用自己的节奏 --> <div >document.addEventListener('aos:in', ({ detail }) => { console.log('进入视口', detail); }); document.addEventListener('aos:out', ({ detail }) => { console.log('离开视口', detail); });

只盯某一个元素时，给它加data-aos-id="hero"，再监听aos:in:hero/aos:out:hero即可。

动画不触发等高频问题速查

动画没按预期走，九成问题落在这几行里：

继续深入：源码、示例与测试

• src/js/aos.js — 主入口：init/refresh/refreshHard与全部默认配置
• src/sass/_animations.scss — 26 个内置动画的 transform 定义；改位移距离就改顶部的$aos-distance（默认 100px）
• demo/index.html — 可直接在浏览器打开的滚动示例页
• cypress/integration/ — 各配置的测试用例，边界行为看这里

下一步：把demo/index.html跑起来，随便选一格把data-aos改成zoom-in，边滚边看aos-animate这个类名是哪一刻被加上去的——搞懂这一秒，后面的定制就都顺了。

【免费下载链接】aosAnimate on scroll library项目地址: https://gitcode.com/gh_mirrors/ao/aos