Emergence.js 是一個輕量級，高性能的 JS 插件，用于檢測和操作瀏覽器中的元素。

這個插件被設計為允許根據(jù)瀏覽器中的可見性對元素進行操作。它使開發(fā)人員可以自由使用自己的 CSS 或JS 來查看動畫還是狀態(tài)的改變。它利用 HTML5 數(shù)據(jù)屬性而不是類來簡化開發(fā)。Emergence.js 是同類型中最輕，最兼容的插件之一。

emergence.js 的特點

1. 無需依賴其他組件
2. 支持IE8 +和所有現(xiàn)代瀏覽器
3. 壓縮后只有1kb

安裝

Emergence.js 的安裝非常的簡單。npm的安裝方法如下：

npm install emergence.js

另外我們也可以直接下載它，在html文件中引入Emergence.js即可。

<script src="path/to/emergence.min.js"></script><script> emergence.init();</script>

如何使用

添加 data-emergence="hidden" 到您想要觀看的任何元素：

< div class = “ element ” data-emergence = “ hidden ” > </ div >

當元素在視口內變得可見時，屬性將變?yōu)?data-emergence="visible" 。現(xiàn)在，您可以利用CSS來動畫元素：

.element [ data-emergence = hidden ] { / *隱藏狀態(tài)* /}.element [ data-emergence = visible ] { / *可見狀態(tài)* / }

自定義選項

Emergence.js有許多選項可以自定義。下面是默認值：

emergence.init({ container: window, reset: true, handheld: true, throttle: 250, elemCushion: 0.15, offsetTop: 0, offsetRight: 0, offsetBottom: 0, offsetLeft: 0, callback: function(element, state) { if (state === 'visible') {  console.log('Element is visible.'); } else if (state === 'reset') {  console.log('Element is hidden with reset.'); } else if (state === 'noreset') {  console.log('Element is hidden with NO reset.'); } }});

選項說明

container：容器，默認情況下，元素的可見性將由窗口的視口尺寸和X / Y滾動位置（設置為window）確定。但是，可以將其更改為自定義容器。例如：

var customContainer = document.querySelector('.wrapper');// www.xttblog.comemergence.init({ container: customContainer});

Throttle：是一種防止與滾動和調整事件大小相關的性能問題的方法。油門將創(chuàng)建一個小的超時，并在事件過程中每隔一定的毫秒量穩(wěn)定地檢查元素的可見性。默認是250。

reset：確定數(shù)據(jù)屬性狀態(tài)是否在顯示后重置。false如果您希望元素即使在離開視口后仍保持其顯示狀態(tài)，請將其重置為。默認是true。

handheld：Emergence將為大多數(shù)手持設備型號（如手機和平板電腦）進行檢查。設置false為時，插件將不會在這些設備上運行。默認是true。

elemCushion：元素坐標將決定在視口內需要多少元素才算“可見”。0.5的值將等于50％的元素需要可見。默認是0.15。

offsetTop, offsetRight, offsetBottom, offsetLeft：在視口的任何邊上提供偏移量（以像素為單位）。如果您有一個固定的組件（例如標題），那么這非常有用，您可以為標題的高度偏移相同的值。100應用于的值offsetTop將意味著元素只有在距離視口頂部大于100像素時才會被視為可見。所有的默認值是0。

callback：用于提供回調來確定元素何時可見，隱藏和重置。可能的狀態(tài)是visible，reset和noreset。

另外Emergence.js還提供了兩個高級方法emergence.engage();和emergence.disengage();他們的作用剛好相反。

Emergence.js依賴于以下瀏覽器API：querySelectorAll 

為了支持IE8，請確保標準模式。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。