鑰匙要點(diǎn)

>
• >可以使用Bower或NPM安裝AOS庫(kù)，並使用一行代碼初始化。一旦初始化，可以通過(guò)將特定屬性添加到HTML元素來(lái)應(yīng)用動(dòng)畫。 > AOS允許開(kāi)發(fā)人員使用數(shù)據(jù)屬性（例如Data-Aos-Offset，Data-Aos-Duration和Data-Aos-easoning）配置動(dòng)畫。它還提供了根據(jù)其他元素的位置觸發(fā)動(dòng)畫的選項(xiàng)，更改動(dòng)畫的默認(rèn)行為，並控制是否應(yīng)一次或每次元素滾動(dòng)播放一次動(dòng)畫。
>
• > AOS庫(kù)將邏輯和動(dòng)畫分開(kāi)，以提供清潔，可維護(hù)的工作流程。它跟蹤元素及其位置，根據(jù)所提供的設(shè)置動(dòng)態(tài)添加或刪除AOS生動(dòng)類。該庫(kù)還允許創(chuàng)建自定義動(dòng)畫，並提供用於在某些設(shè)備或特定條件下禁用動(dòng)畫的功能。
>
如何安裝AOS庫(kù)
您可以使用Bower或NPM安裝AOS。

鮑爾：

bower <span>install aos --save</span>

<span>npm install aos --save</span>

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="bower_components/aos/dist/aos.css"</span>></span>
</span><span><span><span><script</span> src<span>="bower_components/aos/dist/aos.js"</span>></span><span><span></script</span>></span></span>

<span><span><span><link</span> href<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"</span> rel<span>="stylesheet"</span>></span></span>

初始化AOS，只需在JavaScript文件中寫下以下行。

<span><span><span><script</span> src<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"</span>></span><span><span></script</span>></span></span>

要使用基本動(dòng)畫，您只需要將data-aos =“ animation_name”添加到您的html元素。

您可以選擇幾種類型的動(dòng)畫。例如，您可以添加淡出的動(dòng)畫，例如“淡出”，“淡入淡出”和“淡入淡出的左派”。同樣，您還可以添加翻轉(zhuǎn)和滑動(dòng)動(dòng)畫，例如“翻轉(zhuǎn)”，“ flip-left”，“ slide down”和“ slide-right”。

bower <span>install aos --save</span>

>

> data-aos offset - 您可以使用此屬性遲早觸發(fā)動(dòng)畫。它的默認(rèn)值為120px。
data-aos-duration - 您可以使用此屬性來(lái)指定動(dòng)畫的持續(xù)時(shí)間。持續(xù)時(shí)間值可以在50至3000之間，步驟為50ms。由於持續(xù)時(shí)間是在CSS中處理的，因此使用較小的步驟或更寬的範(fàn)圍會(huì)不必要地增加CSS代碼的大小。對(duì)於幾乎所有動(dòng)畫，此範(fàn)圍就足夠了。此屬性的默認(rèn)值為400。
• > data-aos-easoning - 您可以使用此屬性來(lái)控制動(dòng)畫不同元素的時(shí)序函數(shù)?？赡艿闹凳牵壕€性，易於入口和易於何時(shí)。您可以在GitHub上的項(xiàng)目的readme文件上查看所有接受值的列表。
>
以下是使用數(shù)據(jù)效力和數(shù)據(jù)eaos-easoning的示例：>

您可以使用的更多數(shù)據(jù)屬性是：

• data-aos-handor - 當(dāng)您想基於其他元素的位置觸發(fā)動(dòng)畫時(shí)，此屬性很有用。它接受任何選擇器作為其值。默認(rèn)值為null。這意味著所有動(dòng)畫都將相對(duì)於元素自己的位置觸發(fā)。
> data-aos-banker-placement - 默認(rèn)情況下，元素上的動(dòng)畫在其頂部到達(dá)窗口的底部後立即應(yīng)用?？梢允褂肈ata-AOS-ander-placement屬性更改此行為。作為其價(jià)值，此屬性接受兩個(gè)連字符分開(kāi)的單詞。例如，您可以將其設(shè)置為頂部，頂部或頂部。中心值和底部值也可以進(jìn)行三種這樣的組合。
• >
> data-aos-once - 您還可以控制只有在第一次或每次向上或向下滾動(dòng)到特定元素時(shí)才能播放動(dòng)畫。默認(rèn)情況下，每次元素滾動(dòng)到視圖時(shí)都會(huì)重播動(dòng)畫。您可以將此屬性的值設(shè)置為false，以便僅動(dòng)畫一次元素。
以下是使用data-aos-andor-placement的示例：>

在捲軸上動(dòng)畫的目的是分別處理邏輯和動(dòng)畫。為此，邏輯是在JavaScript中寫入的，但動(dòng)畫是在CSS內(nèi)寫的。這種分離使我們能夠在非常乾淨(jìng)且可維護(hù)的工作流程中根據(jù)項(xiàng)目的需求編寫自己的動(dòng)畫並根據(jù)項(xiàng)目的需求進(jìn)行修改。

>圖書館跟蹤所有元素及其位置。這樣，它可以根據(jù)我們提供的設(shè)置動(dòng)態(tài)添加或刪除AOS生動(dòng)類。例如，每當(dāng)將其應(yīng)用的元素移出視口時(shí)，就會(huì)刪除AOS-ANIMATE類。但是，如果一個(gè)元素具有將數(shù)據(jù)設(shè)置為true的數(shù)據(jù)值的值，則AOS-ANIMATE類將不會(huì)從該特定元素中刪除，從而阻止在隨後的滾動(dòng)事件中發(fā)生任何動(dòng)畫，從而使該元素進(jìn)入元素。 ??> AO還將屬性的默認(rèn)值應(yīng)用於HTML文檔上的

>將自己的自定義動(dòng)畫添加到AOS也很簡(jiǎn)單。

只需創(chuàng)建一個(gè)Data-aos屬性選擇器，然後將其設(shè)置為自定義動(dòng)畫的名稱。

接下來(lái)，添加要使用其初始值動(dòng)畫的屬性，以及將過(guò)渡屬性設(shè)置為要?jiǎng)赢嫷膶傩缘拿Q。

例如，假設(shè)您的動(dòng)畫稱為旋轉(zhuǎn)-C，並且所應(yīng)用的元素最初旋轉(zhuǎn)-180度。

bower <span>install aos --save</span>

>

<span>npm install aos --save</span>

這是一個(gè)實(shí)時(shí)演示，使用上述方法順時(shí)針和逆時(shí)針顯示自定義旋轉(zhuǎn)動(dòng)畫：

請(qǐng)參閱滾動(dòng)上的筆劃 - codepen上的sitepoint（@sitepoint）自定義動(dòng)畫。

更多功能

> AOS庫(kù)還提供了許多其他功能，使其更加靈活和用戶友好。您可以將它們作為對(duì)像傳遞給init（）函數(shù)，而不是分別為每個(gè)元素提供屬性。這是一個(gè)示例：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="bower_components/aos/dist/aos.css"</span>></span>
</span><span><span><span><script</span> src<span>="bower_components/aos/dist/aos.js"</span>></span><span><span></script</span>></span></span>

這是兩個(gè)示例，可以說(shuō)明這兩個(gè)功能：

<span><span><span><link</span> href<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"</span> rel<span>="stylesheet"</span>></span></span>