emergence.js 是一个轻量级的 JavaScript 库，它提供了一种简单的方法来检测页面中的元素何时进入视图区域。本文将介绍如何使用 emergence.js 库来实现页面元素出现动画。
安装和引用
首先，在项目中安装 emergence.js：
npm install emergence.js
然后，在 HTML 文件中引用它：
<script src="node_modules/emergence.js"></script>
或者在 JavaScript 中使用 import 引入：
import Emergence from 'emergence.js';
基本用法
为了让 emergence.js 监听页面中的元素，我们需要将它们包裹在一个容器中，并添加 data-emergence 属性：
<div data-emergence> <!-- 要监听的元素 --> </div>
然后，我们需要创建 Emergence 实例并启动它：
const emergenceInstance = new Emergence({
container: window, // 监听容器，默认是窗口
});
emergenceInstance.start();现在，当被包裹的元素进入视图区域时，会触发 emergence.visible 事件。我们可以监听该事件来执行相应的操作：
document.addEventListener('emergence.visible', (event) => {
const visibleElement = event.detail.element;
// 执行动画或其他操作
});高级用法
emergence.js 还提供了一些高级用法，例如：
自定义出现动画
可以通过 data-emergence-viewport 属性来指定出现时元素的初始状态，如下所示：
<div data-emergence data-emergence-viewport="0.5"> <!-- 初始样式 --> </div>
这里，data-emergence-viewport 的值为 0 到 1 之间的数字，表示元素进入视图区域的偏移量（相对于窗口高度）。在上面的例子中，当元素进入视图区域的一半时，它会从原来的样式出现。
监听隐藏事件
除了监听 emergence.visible 事件，还可以监听 emergence.hidden 事件，该事件在被包裹的元素离开视图区域时触发。
document.addEventListener('emergence.hidden', (event) => {
const hiddenElement = event.detail.element;
// 执行动画或其他操作
});自定义容器
我们可以通过 container 选项来指定要监听的容器。例如，如果要监听一个滚动容器中的元素，可以这样做：
const container = document.querySelector('.scroll-container');
const emergenceInstance = new Emergence({
container: container,
});
emergenceInstance.start();示例代码
以下是一个简单的示例，演示如何使用 emergence.js 实现页面元素出现动画：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ----------
-------
---- -
------ ------
------- ------
----------------- ----
-------- --
----------- ------- ----- ---------
-
------------ -
-------- --
-
--------
-------
------
---- ---------------
---- ------------------
------
------- -----------------------------------------
--------
----- ----------------- - --- ------------
--------------------------
---------------------------------------------- ------- -- -
----- -------------- - ---------------------
----------------------------------------
---
---------
-------
-------以上就是使用 emergence.js 实现页面元素出现动画的教程。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34575