用途:本技能围绕 AOS(Animate On Scroll)这一轻量、CSS 驱动的滚动触发动画库,用于在元素进入视口时播放淡入、滑动、缩放等效果,适合营销页、落地页、博客与文档等内容型站点,以及需要快速实现滚动动画的原型。
主要能力:安装方式支持 CDN 与 NPM/Yarn(npm install aos@next 或 yarn add aos@next),引入 aos.css 后调用 AOS.init()。通过 data-aos 属性在 HTML 中声明动画,内置 50 多种效果,包括 fade、slide、zoom、flip 系列。全局配置项含 duration、delay、offset、easing、once、mirror、anchorPlacement、disable、startEvent、debounceDelay、throttleDelay;也可用 data-aos-duration、data-aos-delay、data-aos-offset、data-aos-easing、data-aos-once、data-aos-mirror、data-aos-anchor-placement 等属性做元素级覆盖。支持 data-aos-anchor 指定锚点触发,以及用 CSS 自定义动画。
使用方式:资料给出落地页首屏、功能卡片网格、左右交替内容、滚动评价、锚点触发、顺序动画链、图片画廊等模式;并提供 React(useEffect 初始化、路由变化时 AOS.refresh()、动态内容刷新、组件封装)、Vue(mounted 初始化、updated 中 $nextTick 刷新)、Next.js(_app.js 初始化)的集成示例。
限制:复杂时间线或精确滚动同步应改用 GSAP ScrollTrigger,物理动画用 React Spring 或 Framer Motion。duration 与 delay 上限为 3000ms,超出需自定义 CSS。动态添加元素后需调用 AOS.refresh() 或 AOS.refreshHard()。性能上可 disable 移动端、once: true、disableMutationObserver: true,并减少动画元素。资料未提供收费、价格与平台信息。