介绍
animation-loader 是一个 npm 包，用于为 CSS 文件自动生成动画类名，可以帮助前端开发者节省时间并提高工作效率。本文将对该包进行详细介绍及使用指导，适合有一定前端基础的开发者。
安装
可以使用 npm 或 yarn 进行安装。
npm install -D animation-loader
或
yarn add --dev animation-loader
使用
配置
在 webpack 配置文件 (webpack.config.js) 中的 module.rules 添加如下配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-------------
-------------------
--
--
--
--
--使用
在 CSS 文件中，通过在类名后面添加 @-animation，可以让 animation-loader 自动生成动画类名。例如：
-- -------------------- ---- -------
---- -
------ ------
------- ------
----------------- ----
---------- ---- -- ---------
-
--------------- -
---- -
---------- ---------
-
-- -
---------- -----------
-
-
-- -------- ----------------- --然后可以在 JS 文件中使用该类名：
const el = document.querySelector('.box--animation-1');
el.addEventListener('animationend', () => console.log('Animation Finished!'));示例代码
以下是一个完整的示例代码，使用 animation-loader 自动生成两个不同的动画类名，并添加动画结束监听事件：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-------------
-------------------
--
--
--
--
---- -------------------- ---- -------
-- --------- --
---- -
------ ------
------- ------
----------------- ----
---------- ---- -- ---------
-
--------------- -
---- -
---------- ---------
-
-- -
---------- -----------
-
-
----------------- -
---- -
---------- ----------
-
-- -
---------- ---------------
-
--- -------------------- ---- ------- -- -------- ------ -------------- ----- --- - -------------------------------------------- ----- --- - -------------------------------------------- ------------------------------------ -- -- ---------------------- ------------- ------------------------------------ -- -- ---------------------- -------------
指导意义
animation-loader 可以帮助前端开发者在处理 CSS 动画类名的过程中节省时间、提高效率。本文提供了安装和使用指南以及示例代码，希望能够对广大前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557b981e8991b448d4c26