1. 什么是 ngx-no-animation-for-dinosaur
ngx-no-animation-for-dinosaur 是一个用于 Angular 项目的 npm 包，该包能够移除网页中所有动画效果，让网页免受动画干扰，从而提升用户体验。此外，这个包还提供了一系列配置项，使用户能够精细地控制哪些动画需要移除，从而适应不同的需求。
2. 如何使用 ngx-no-animation-for-dinosaur
2.1 安装
在命令行中执行以下命令，即可安装 ngx-no-animation-for-dinosaur：
npm install ngx-no-animation-for-dinosaur
2.2 在 Angular 项目中使用
在使用 ngx-no-animation-for-dinosaur 之前，你需要在你的 Angular 项目中引入 BrowserAnimationsModule，因为 ngx-no-animation-for-dinosaur 是在 BrowserAnimationsModule 的基础上构建的。
接着，在你的 app.module.ts 文件中，按以下方式引入 ngx-no-animation-for-dinosaur：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------------- - ---- --------------------------------------- ------ - ---------------------------- - ---- -------------------------------- -- ----- ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- --------------- --------------------- ------------------------------ ---------- --- ---------- --------------- -- ------ ----- --------- --
这样，你的 Angular 项目就已经引入了 ngx-no-animation-for-dinosaur。
2.3 配置项说明
targetElements：指定需要移除动画的元素集合。默认情况下，ngx-no-animation-for-dinosaur 会移除页面中全部带有动画样式的元素。如果希望只移除部分元素的动画，那么可以通过该配置项来指定需要移除的元素。该配置项应是一个数组，元素为 CSS 选择器，例如.my-btn。noBuiltIn：是否移除 Angular 內建的动画。默认值为false，即不移除 Angular 內建的动画。如果希望移除 Angular 內建的动画，可以将该配置项设置为true。
2.4 使用示例
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ------------- --- -------------
---- ------ --- ----------
------
---- --------------- ------------------- --------- --- ----------------
--
----------- -
---------------------- -
-------------------- -
------- -------- - ---
------------- ------- -------- - ----
---
-------------------- -
------- -------- - ---
------------- ------- -------- - ----
---
---
--
--
------ ----- ------------ --在上面的代码中，我们定义了一个带有动画效果的按钮和一个带有动画效果的段落。现在我们需要使用 ngx-no-animation-for-dinosaur 移除这些动画：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------------------- - ---- --------------------------------
------------
--------- -----------
--------- -
---- ------------- --- -------------
---- ------ --- ----------
------
---- --------------- ------------------- --------- --- ----------------
--
----------- -
---------------------- -
-------------------- -
------- -------- - ---
------------- ------- -------- - ----
---
-------------------- -
------- -------- - ---
------------- ------- -------- - ----
---
---
--
--
------ ----- ------------ -
------------------- ------------------------------ ------------------------------ -
------------------------------------------
--------------- ------------ -- --- ----- - ------ ------
---------- ----- -- -- ------- -----
---
-
-如上，我们在 AppComponent 的构造器中注入 NoAnimationForDinosaurService，并在构造器中使用了该服务的 apply 方法。该方法接收一个配置对象，其中我们指定了 targetElements 属性，只移除 class 为 my-btn 的元素的动画；noBuiltIn 属性为 true，移除 Angular 內建的动画。运行上面的代码，就会发现页面中的动画被成功地移除了！
3. 总结
ngx-no-animation-for-dinosaur 是一个非常实用的 npm 包，它可以帮助我们移除网页中的动画效果，降低用户在浏览网页时的不适感。我们只需在 Angular 项目中引入该包，然后在代码中使用 NoAnimationForDinosaurService 进行配置即可。希望本文对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596781e8991b448d6e93