AOS Modern v3 由 Gemini AI 重写 Rewritten by Gemini AI

下一代页面滚动揭示动画库 Next-Gen Scroll Animation Library

基于原生现代浏览器 API 重新设计的滚动揭示动画库。更加轻量、零依赖,支持在页面滚动时流畅地唤起硬件加速的过渡动效。完美原生适配 React 与 Vue 生命周期。

AOS re-engineered for modern browsers. Lightweight, zero dependencies, hardware-accelerated transitions, and seamless integrations with React and Vue lifecycles.

核心优势与亮点 Core Features & Highlights

不仅仅是现代化重写,更是针对现代 SPA 框架与移动端流畅度进行的全面革新。

More than just a rewrite—fully optimized for modern SPA frameworks and ultra-smooth mobile performance.

硬件加速 / 卓越性能 Hardware Acceleration / Performance

彻底抛弃了传统的 window scroll 监听事件与防抖函数,全面基于原生硬件加速的 IntersectionObserver 架构,极大地降低了 CPU 和主线程的占用,保证移动端 60+ FPS 的极度流畅。

Completely replaces legacy scroll listeners with the native, hardware-accelerated IntersectionObserver API, reducing CPU overhead and delivering a buttery-smooth 60+ FPS on mobile.

零外部依赖 Zero Dependencies

移除了遗留的 Classlist-polyfill、Lodash 等重型包。整个库的编译产物精简,只专注于高效的核心动效绑定,避免为您的项目带来额外的代码体积负担。

Removed obsolete Classlist-polyfill, Lodash, and other heavy modules. Optimized bundle size to avoid overhead in your modern bundle.

原生 React & Vue 支持 Native React & Vue Support

官方内置对现代前端框架的原生分包绑定,提供 React Custom Hook (`useAOS`) 以及统一适配 Vue 2/3 的自定义指令 (`v-aos`),完美适配 SPA 路由与组件挂载/卸载生命周期。

Built-in framework packages with React Custom Hook (useAOS) and Vue Directive (v-aos), matching SPA router changes and component lifecycles.

动态 DOM 侦测 Dynamic DOM Detection

基于原生 MutationObserver 监听 DOM 树的变化。即使您是通过 Ajax 异步插入或动态加载的带 data-aos 属性的 DOM 元素,AOS 也能自动识别并绑定,无需手动 refresh。

Powered by the native MutationObserver API to watch DOM changes. Elements with data-aos dynamically added (e.g., via Ajax) are automatically animated without manual refreshes.

丰富预设 / 高度定制 Rich Presets & Highly Customizable

内置提供 50+ 种前卫预设动效(包含新增的模糊、倾斜、旋转、回弹与特技系列),并支持独立元素配置偏移触发距离、动画时长、延迟、缓动函数,极易定制专属动效。

Comes with 50+ premium preset animations (including new blur, skew, rotate, and springy back-ins). Easily customize offsets, duration, delay, and easing per element.

SEO 友好 / 渐进增强 SEO Friendly & Progressive Enhancement

遵循渐进增强设计理念。在 JS 禁用或未完成加载时,网页内容依然完整无损地呈现给爬虫和用户,利用 IntersectionObserver 高效触发 class 激活,完美兼顾 SEO 与极佳视觉效果。

Designed with progressive enhancement. Page content remains fully readable by search engines and users even when JS is disabled. IntersectionObserver updates tags for optimal indexing.

交互式配置游乐场 (Playground) Interactive Configuration Playground

在左侧实时调整控制参数,可在右侧和下方即时预览动画效果并提取自动生成的集成代码。

Tweak parameters on the left to instantly preview animations on the right, and copy the generated integration code below.

预览卡片 Preview Card

fade-up

加载中...Loading...

预设效果展示墙 Presets Showcase Wall

AOS Modern 内置了数十种高级过渡动画。沿页面下滚,亲身体验不同类别的动效:

AOS Modern includes dozens of built-in transitions. Scroll down to experience different animation groups: