animsition 是一个基于 CSS 动画效果的前端库，它可以帮助开发人员为网站添加转场动画效果，从而提高网站的用户体验。在本文中，我们将详细介绍如何使用 npm 包 animsition。
安装和引入
首先，在命令行中执行以下代码来安装 animsition：
npm install animsition
然后，在你的 HTML 文件中引入 animsition 的 CSS 文件和 JavaScript 文件：
<!-- 引入 animsition 的 CSS 文件 --> <link rel="stylesheet" href="node_modules/animsition/dist/css/animsition.min.css"> <!-- 引入 jQuery 和 animsition 的 JavaScript 文件 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/animsition/dist/js/animsition.min.js"></script>
基本用法
在你的 HTML 中，为需要添加动画效果的元素添加 animsition 类名即可：
<div class="animsition"> <!-- 这里是需要添加动画效果的元素 --> </div>
然后，在 JavaScript 中，调用 animsition() 函数来初始化 animsition：
$(document).ready(function() {
$('.animsition').animsition();
});这样就完成了 animsition 的基本配置。现在，当用户访问页面时，所有包含 animsition 类名的元素都会有默认的淡入淡出动画效果。
配置选项
animsition 提供了丰富的配置选项，可以帮助你自定义动画效果和行为。以下是一些常用的配置选项：
inClass和outClass：分别指定进入和离开时的动画类名，默认为fade-in和fade-out。inDuration和outDuration：分别指定进入和离开时的动画持续时间，默认为 1500 毫秒。linkElement：指定点击链接时应该使用 animsition 的动画效果，默认为'a[href]:not([target="_blank"]):not([href^="#"])'，即除了新窗口打开的链接和锚点链接以外的所有链接。loading：指定是否显示加载动画，默认为true。loadingParentElement：指定加载动画的容器元素，默认为'body'。loadingClass：指定加载动画的类名，默认为'animsition-loading'。
下面是一个示例代码，演示如何自定义动画效果和加载动画：
-- -------------------- ---- -------
---------------------------- -
-----------------------------
-------- -------------
--------- --------------
----------- -----
------------ ----
------------ -------------------
-------- -----
--------------------- -------
------------- ---------------------------
---
---事件回调
animsition 还提供了多个事件回调，可以让你在动画执行前或执行后执行自定义的 JavaScript 代码。以下是一些常用的事件回调：
onLoadEvent：当页面加载时执行。onBefore：在动画执行前执行。onStart：在动画开始执行时执行。onEnd：在动画结束时执行。onExitBefore：在用户离开当前页面之前执行。
以下是一个示例代码，演示如何使用 onStart 和 onEnd 事件回调：
-- -------------------- ---- -------
---------------------------- -
-----------------------------
-------- -------------
--------- --------------
-------- ---------- -
----------------------
--
------ ---------- -
----------------------
-
---
---结语
通过
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33725