简介
metrojs 是一个 JavaScript 库，提供多种动画效果，可以用于网站的交互效果设计。它的特点是简单易用，支持多种效果，适用于各种场景。
使用 metrojs，只需要在项目中引入它的交互脚本，即可快速实现各种动画效果，如旋转、平移、缩放、淡入淡出等。在网页设计中，使用 metrojs 可以为网站提供更加丰富和有趣的交互效果，增强用户体验。
安装与使用
安装
在 Node.js 环境下，使用以下命令安装 metrojs：
npm install metrojs
也可以通过 CDN 引入 metrojs，具体方式如下：
<script src="https://cdn.jsdelivr.net/npm/metrojs@1.0.0/dist/metro.min.js"></script>
使用
在 HTML 页面中，引入 metrojs 的交互脚本：
<!-- 引入 metrojs 交互脚本 --> <script src="path/to/metro.js"></script>
在 JS 中使用 metrojs 函数，如下：
// 新建一个 Metro 对象
var metro = new Metro();
// 绑定效果对象
metro.bind('#element', 'bounce');
// 执行效果
metro.go();上述代码创建了一个 Metro 对象，在 Metro 对象中绑定了一个 ID 为 ‘#element’ 的 HTML 元素，并为该元素绑定了 bounce 效果。最后，通过 go 方法执行绑定的效果。
API 文档
新建 Metro 对象
Metro 函数可用于新建一个 Metro 对象。Metro 对象用于绑定动画效果，并执行这些效果。
var metro = new Metro();
bind 绑定效果
bind 方法用于绑定效果到 HTML 元素。它接受两个参数：第一个参数是 CSS 选择器，用于选择需要绑定效果的 HTML 元素；第二个参数是效果名称，表示需要绑定的效果。该函数返回绑定后的 Metro 对象。
metro.bind('#element', 'bounce');unbind 取消绑定效果
unbind 方法用于取消绑定效果。它接受一个参数：效果名称。该函数返回取消绑定后的 Metro 对象。
metro.unbind('bounce');go 执行效果
go 方法用于执行绑定的效果。该函数可以不接受参数。
metro.go();
示例代码
下面是一个简单的示例代码，演示如何使用 metrojs 实现弹跳效果：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------- --------------
-------
-------- -
------ -----
------- -----
----------------- -----
-
--------
------- --------------------------------
--------
-- ---- ----- --
--- ----- - --- --------
-- ------
---------------------- ----------
-- ----
-----------
---------
-------
------
---- -------------------
-------
-------总结
使用 metrojs，可以轻松实现网站中的丰富交互效果，增强用户体验。它提供了多种效果和 API，可以满足各种需求。本文介绍了 metrojs 的安装、使用和 API，同时提供了一个简单的示例代码，帮助读者快速上手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f451d8e776d08040f57