animsition 是一个基于 CSS 动画效果的前端库，它可以帮助开发人员为网站添加转场动画效果，从而提高网站的用户体验。在本文中，我们将详细介绍如何使用 npm 包 animsition。
安装和引入
首先，在命令行中执行以下代码来安装 animsition：
--- ------- ----------
然后，在你的 HTML 文件中引入 animsition 的 CSS 文件和 JavaScript 文件：
---- -- ---------- - --- -- --- ----- ---------------- ----------------------------------------------------------- ---- -- ------ - ---------- - ---------- -- --- ------- ----------------------------------------------------------- ------- -----------------------------------------------------------------
基本用法
在你的 HTML 中，为需要添加动画效果的元素添加 animsition 类名即可：
---- ------------------- ---- -------------- --- ------
然后，在 JavaScript 中，调用 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