对于最后一个稳定版本 (v2)，请转到此处
为了更好地理解它的实际工作原理，我鼓励您查看我关于 CSS-tricks 的文章。
在<head>中添加样式：
< link rel =" stylesheet " href =" https://unpkg.com/aos@next/dist/aos.css " />在关闭</body>标签之前添加脚本，并初始化 AOS：
< script src =" https://unpkg.com/aos@next/dist/aos.js " > </ script >
< script >
AOS . init ( ) ;
</ script >安装aos包：
yarn add aos@nextnpm install --save aos@next导入脚本、样式并初始化 AOS：
import AOS from 'aos' ;
import 'aos/dist/aos.css' ; // You can also use <link> for styles
// ..
AOS . init ( ) ;为了使其工作，您必须确保您的构建过程已配置样式加载器，并将其全部正确捆绑。但是，如果您使用的是 Parcel，它将按提供的方式开箱即用。
AOS . init ( ) ;
// You can also pass an optional settings object
// below listed default settings
AOS . init ( {
// Global settings:
disable : false , // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent : 'DOMContentLoaded' , // name of the event dispatched on the document, that AOS should initialize on
initClassName : 'aos-init' , // class applied after initialization
animatedClassName : 'aos-animate' , // class applied on animation
useClassNames : false , // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver : false , // disables automatic mutations' detections (advanced)
debounceDelay : 50 , // the delay on debounce used while resizing window (advanced)
throttleDelay : 99 , // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset : 120 , // offset (in px) from the original trigger point
delay : 0 , // values from 0 to 3000, with step 50ms
duration : 400 , // values from 0 to 3000, with step 50ms
easing : 'ease' , // default easing for AOS animations
once : false , // whether animation should happen only once - while scrolling down
mirror : false , // whether elements should animate out while scrolling past them
anchorPlacement : 'top-bottom' , // defines which position of the element regarding to window should trigger the animation
} ) ;data-aos属性设置动画： < div data-aos =" fade-in " > </ div >并使用data-aos-*属性调整行为：
< div
data-aos =" fade-up "
data-aos-offset =" 200 "
data-aos-delay =" 50 "
data-aos-duration =" 1000 "
data-aos-easing =" ease-in-out "
data-aos-mirror =" true "
data-aos-once =" false "
data-aos-anchor-placement =" top-center "
>
</ div >查看所有动画、缓动和锚点位置的完整列表
还有一个只能在每个元素的基础上使用的设置：
data-aos-anchor - 其偏移量将用于触发动画而不是实际动画的元素。示例：
< div data-aos =" fade-up " data-aos-anchor =" .other-element " > </ div >通过这种方式，您可以在滚动到另一个元素时触发一个元素上的动画 - 这对于为固定元素设置动画非常有用。
AOS对象被公开为全局变量，目前有三种方法可用：
init初始化AOSrefresh - 重新计算元素的所有偏移量和位置（在窗口调整大小时调用）refreshHard - 使用 AOS 元素重新初始化数组并触发refresh （在与aos元素相关的 DOM 更改时调用）执行示例：
AOS . refresh ( ) ;默认情况下，AOS 会监视 DOM 更改，如果有异步加载任何新元素，或者从 DOM 中删除某些内容，它会自动调用refreshHard 。在不支持MutationObserver例如 IE）的浏览器中，您可能需要自己调用AOS.refreshHard() 。
refresh方法在窗口调整大小等时调用，因为它不需要使用 AOS 元素构建新存储，并且应该尽可能轻。
每当任何元素动画进入或退出时，AOS 都会在文档上调度两个事件： aos:in和aos:out ，以便您可以在 JS 中执行额外的操作：
document . addEventListener ( 'aos:in' , ( { detail } ) => {
console . log ( 'animated in' , detail ) ;
} ) ;
document . addEventListener ( 'aos:out' , ( { detail } ) => {
console . log ( 'animated out' , detail ) ;
} ) ;您还可以通过设置data-aos-id属性来告诉 AOS 在特定元素上触发自定义事件：
< div data-aos =" fade-in " data-aos-id =" super-duper " > </ div >然后您将能够监听两个自定义事件：
aos:in:super-duperaos:out:super-duper有时内置动画还不够。假设您需要一个盒子根据分辨率具有不同的动画。您可以这样做：
[ data-aos = "new-animation" ] {
opacity : 0 ;
transition-property : transform , opacity;
& . aos-animate {
opacity : 1 ;
}
@media screen and ( min-width : 768 px ) {
transform : translateX ( 100 px );
& . aos-animate {
transform : translateX ( 0 );
}
}
}然后在 HTML 中使用它：
< div data-aos =" new-animation " > </ div >该元素只会在移动设备上设置不透明度动画，但从 768px 宽度开始，它也会从右向左滑动。
与动画类似，您可以添加自定义缓动：
[ data-aos ] {
body [ data-aos-easing = "new-easing" ] & ,
& [ data-aos ][ data-aos-easing = "new-easing" ] {
transition-timing-function : cubic-bezier ( .250 , .250 , .750 , .750 );
}
}内置动画的默认距离为 100 像素。只要您使用 SCSS，您就可以覆盖它：
$ aos-distance : 200 px ; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss' ;但是，您必须配置构建过程以允许它预先从node_modules导入样式。
使用animatedClassName更改AOS 的默认行为，以在滚动时应用放置在data-aos内的类名称。
< div data-aos =" fadeInUp " > </ div > AOS . init ( {
useClassNames : true ,
initClassName : false ,
animatedClassName : 'animated' ,
} ) ;上面的元素将获得两个类： animated和fadeInUp 。使用上述三个设置的不同组合，您应该能够集成任何外部 CSS 动画库。
然而，外部库不太关心实际动画之前的动画状态。因此，如果您希望这些元素在滚动之前不可见，您可能需要添加类似的样式：
[ data-aos ] {
visibility : hidden;
}
[ data-aos ]. animated {
visibility : visible;
}duration 、 delay持续时间和延迟接受从 50 到 3000 的值，步长为 50 毫秒，这是因为它们是由 css 处理的，并且为了不使 css 比它已经长，我只实现了一个子集。我相信这些应该涵盖大多数情况。
如果没有，您可以编写简单的 CSS 来添加另一个持续时间，例如：
body [ data-aos-duration = '4000' ] [ data-aos ] ,
[ data-aos ][ data-aos ][ data-aos-duration = '4000' ] {
transition-duration : 4000 ms ;
}此代码将添加 4000 毫秒的持续时间，供您在 AOS 元素上设置，或在初始化 AOS 脚本时设置为全局持续时间。请注意，双[data-aos][data-aos] - 这不是一个错误，而是一个技巧，使单个设置比全局设置更重要，而无需在那里写丑陋的“！重要”:)
用法示例：
< div data-aos =" fade-in " data-aos-duration =" 4000 " > </ div > 淡入淡出动画：
翻转动画：
幻灯片动画：
缩放动画：
如果您发现错误、有疑问或想法，请查看 AOS 贡献指南，并随时创建新问题。
